[Solved] Page load animation only works after reloading?

Hi Webflow community – This page has a page-load animation that doesn’t start on the published site, unless you reload the page a few times.

Published site before reload

After reload

Nothing on the console.

Could this be an issue with large image sizes? I am aware that I am using many large images and am OK with some loading delays, but not sure why the animation isn’t starting off at all.

Appreciate your help diagnosing this!


Here is my public share link: Grocery App - Test Page

Hi @keywonc

  1. Images are much too big. Please make them smaller and compress to .webp format.
  2. Turn off the lazy: loads on scroll effect to every image used on the animation.

Hi @keywonc

I saw a “thumb up” from you. Did my solution fix your problem?

Hi Maciej @mkukulka – yes!! It seems to work after I swapped them with webp files and changed the load option to “Eager.”

Thanks so much for the help! I didn’t realize webp files can handle transparency well, I can use this tip for the rest of the site :heart_eyes:

1 Like

Update: Problem persisted even after reducing image size & changing loading option to “eager.”

Solution: Instead of assigning both animations on Page Load, trigger both when section scrolls into View.