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!
To ensure your page loader animation performs optimally, follow these key setup steps:
Position the Lottie animation with “Fixed” positioning
Set both width and height to 100%
Apply a high z-index value (e.g., 9999) to keep it above other elements
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.
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.