Intro animation not working properly on page load [RESOLVED]

Design help Animations & Interactions
1

Dear Webflow community,

I have created an intro animation to move multiple animal vectors into position as soon as the page loads (using the “when page finishes loading” trigger).

As soon as I publish my site, the animals barely move, some of them glitch and stutter, and only the opacity animation seems to work. When I refresh my page without emptying the caches, everything works fine. As soon as I empty my caches or test on a different browser, the problem appears.

I would really appreciate some help on this please.

Thank you.

Here is my public share link: LINK
(how to access public share link)

Here is the published site: LINK

Here is a screen recording of the behaviour (first load is with empty caches, second load is just refresh):

Screen Recording
Screen Recording1152×720 2.5 MB

2

@Mike_Zachariades Did you fix this? When I load the published site and scroll through, it works beautifully. I’ve emptied the cache several times and still it works great.

Even though I can’t replicate what you’re experiencing, I still looked at the read-only site. The only thought I have to improve the flow is to change your easing on all animal images to something like in-out-quad. Hope you did already solve your issue! Love the site…

3

Thanks for testing it out @LunarLight.

However, the issue is not on the scroll animation, but on the page load animation which happens before that. The animals are supposed to slide into their position as soon as the page loads. After they are in position, they respond to scroll movement moving back and forth accordingly.

When I clear my cache and reload the page (without scrolling or anything) the animals only fade in and slightly glitch rather than slide into position. The scroll animation works normally. When I refresh the page without emptying my cache, everything animates properly.

So confused…

Here is a screen recording of the behaviour (first load is with empty caches, second load is just refresh):

Screen Recording
Screen Recording1152×720 2.5 MB

5

PROBLEM SOLVED:

It seems that there was conflict between the scroll animation and the page load animation as they were both targeting the same elements. I placed all animal images in their own divs and animated the divs on page load and the animal images on scroll. This did the trick.

1 Like