Entry animations don’t work well when they are above the fold. The problem is that the element is visible when the page loads, and only after it has loaded does the animation take effect, so the element is hidden before it animates in (fade, slide, zoom, etc.)
In it, a page is loaded, and the banner and three smaller images all appear before they are hidden and then animate in.
It seems like the CSS for animated elements needs to be loaded at the very top of the page before the page contents are loaded.
I know I can use a preloader or manually add some critical CSS to load in the header, but it would be nice to not have to and helpful for those who aren’t as well versed in doing so.
Nevermind…found a solution, although it’s not overly inutive, it’s effective. Just set the opacity to zero on the element ID. The animation will override that so although it will not be visible when loaded, it will animate in.
It seems that the same problem as @ainom mentioned, is occurring again with the new animation options (in Interactions).
I have different elements in a hero section, with the following interaction configured:
Action > Start animation
Trigger > Content load (I have tried with enter viewport, and the same occurs)
Animation > Fade in
With that parameters, the sequence is: the page loads, the elements are visible for a tiny moment, and then the fade in starts. It makes really weird to see, as if there was some glitch.
If I add a delay to the element, the “glitch” is even bigger.
