Webflow loading page animation glitching

Hi everyone,

I’ve created a loading page animation in Webflow, and when I preview it inside the Webflow Designer, everything works perfectly. However, when I check it on the live site, the animation seems to get interrupted or canceled before the page is even fully loaded.

It’s as if the animation tries to play but then stops abruptly, almost like something is overriding it or the page transitions too quickly.

Has anyone experienced this before or know what might be causing it? Any help would be much appreciated!

Thanks in advance,

I can’t like to a recording on the issue on here…

Hi there,

To ensure your page loader animation performs optimally, follow these key setup steps:

  1. Position the Lottie animation with “Fixed” positioning
  2. Set both width and height to 100%
  3. Apply a high z-index value (e.g., 9999) to keep it above other elements
  4. Enable the “Loop” option in Lottie Animation Settings if continuous playback is desired

For smooth performance, minimize potential conflicts by reducing the number of simultaneous animations, transitions, and transforms on your page. Third-party integrations running concurrently may also impact your loader’s performance.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Hi there,

The issue is still not resolved:

In the preview the animation is working great, but when I look at my published version not.

It seems like when u enter the page for the first time it shows the animation and disappears after. When u refresh only 0.1 frame is showing and then there is no text.

Attached the preview link:

Hi @chris_van_den_heuvel , please share a read-only link and the live website link.

EDIT: Sorry didn’t saw your last post.

You used a scroll into view animation and not when page loads that’s why as soon as you scroll a bit it plays the animation