I’m working on a page for a client, and my deadline is fast approaching, but I can’t seem to fix an issue with the page loading animation not running smoothly. I’ve seen other posts mentioning large image sizes as a common culprit, but I feel like my images are already well-optimized—they’re all in AVIF format and quite small.
Despite this, the page load animation stutters on every page in every browser. It’s set to trigger “when the page finishes loading,” so I would assume everything is fully loaded by then and that the animation should run smoothly.
Does anyone have any insights or suggestions on what might be causing this? Any help would be greatly appreciated!
Hi, thanks for your reply! The page load animation consists of three boxes moving up and changing opacity—pretty simple, but it still stutters on the published site (please see the staging link OmegaOne). I mentioned avif because I don’t think the problem occurs because of heavy images on the site, but I have no idea what else could be the cause.
Hmm… it still appears smooth for me. No stuttering.
Have you viewed the page on a private/incognito browser. Might be a caching issue is causing the poor movement on your browser.
FWIW, If you believe the issue is caused from the interaction itself, this particular look can be rebuilt very quickly using Webflow’s prebuilt animations (Slide > From Bottom). See settings in screenshot below.
You’d create three ‘Page Load’ or ‘Scroll into View’ interactions. One interaction for each of your three elements. The first one loads right after the page loads, and the second/third use slight delays.
Thank you very much, you’re right! It was a caching issue. Once I went into incognito mode, everything runs smoothly on every browser. Thank you so much for your time!!
