I am exporting blocks with interactions and have run into an issue. I have several ‘FadeUp’ interactions that work without issue but its the ‘Hide at Start’ which refuses to work within Wordpress. In Pinegrow it works as intended. I can load up for example, in font-page.php from Wordpress loading the page (with no blocks) and the interactions work correctly. It’s when I use them in a block I run into issues. I have everything internally within the Block on a wrapper div with a section div inside it with the interactions and a block attribute applied. (See Screenshot). Am I not able to put interactions on the same div I have a block on?
I have spent too much time on this already, I do hope someone can point me in the right direction.
Hi @matjaz that file seems to be loading. It’s an intermittent issue even within a block. For example a block with two headings, one heading the Hide at Start will work as intended, but the one below it in the same block will not. I have deleted and re-added them multiple times. My only success is adding an interaction and Hide at Start on a different element and it will work. I have deleted all blocks, tried on different pages within Pinegrow with the same issue. I made a screen recording that may help. See it here: Interactions with a block conflicts.
@deirdre_nic one thing I noticed is that pgia.js script is included directly in the navigation section. This can cause pgia.js to be included multiple times and lead to unexpected results.
pgia.js should be only included once, in before the closing body tag in index.html (the master page). Activating interactions on the page automatically places it there.
I have deleted the section and rebuilt it and still the Hide at Start refuses to work only on certain elements like the h1 an h2 in the banner. I have also tried putting the Scroll Scene directly on the element of the h1 an still no change.
I have a similar problem for more then 2 years now, but with Hide at Start and opacity:0 in Ajax driven websites and Interactions. The only working solution I found is adding opacity: 0; to the element that has to hide at start and put that CSS in the head like this:
.element-to-hide { opacity: 0; }
Just give it a try and see if it works, this is not a satisfactory solution of course. I suspect something in the code of Interactions is wrong for certain situations.
I rebuilt the section and interactions in a new page. I have a delay of 1.2 seconds before the headings animate FadeInUp. On the background image div I have a FadeIn with no delay. Now the H1, H2 and Button animate correctly. In my original block the H1, H2 and Button the Hide at Start did no work. But I encountered the same issue with the background img div FadeIn now not applying the Hide at Start. I wrapped it in a new div and moved the block up to the new div, with the old div (no inside in the new div) maintaining the interactions. Now all animations work. I had the same structure on the original block and it made no difference. What is bizarre is I can’t establish a pattern for this error.
@deirdre_nic Quick question to try to get things going: Have you tried creating a totally different theme project with the bare minimum, only an index page, something super basic, no external scripts other than Pinegrow’s Interactions add-on and nothing but a super simple HTML element/block on which you could run tests on those very interactions?
@Matjaz Are you sure lol… I am running a Google Map, Fancybox 4 and my custom header script as well. Possible conflict. But if works without issue in Pinegrow which is the strange thing. When I have some spare time I will create a new project and test it out with a fresh Wordpress install. Not the end of the world. I will send the project onto you. Thank you for all the help
@deirdre_nic Still in the perspective of discovering the cause of what seems to be a conflict, perhaps you could proceed by elimination by removing one after the other the various scripts that you load?
This will not solve your problem immediately, but it will be interesting for the future, and to possibly find alternative solutions?
Thank you @deirdre_nic, this was very helpful. I found and fixed a bug with interactions on elements that are also editable block attributes used as content (editable text).
The workaround is to create wrapper elements for such elements and add interactions there.
EDIT: The fix is now out through Live script. Just restart PG.
