Lottie animation not stretching across entire screen

Currently, I have a Lottie preloader animation with its position set to Fixed, and with the size set to either 170% (on both Width and Height) or 200% depending on the breakpoint. All looks good in the Designer, but when I publish and preview, the Lottie animation stays fixed in the center of the screen.

Originally, the animation comp size was 1920 x 1080, which I thought would work better with screen ratios, but someone else said I should make comp larger and to make it a square, so this AE comp size was 2500 x 2500, before rendering. Curious what size is most ideal for this type of animation (entire screen, page-load lottie)?

Another issue I get, and one that’s pervasive across every tested Lottie page-load animation, is when I test the published animation, many times there’s a one second flicker of the landing page before the loading animation is even triggered. This happens especially after I clear the cache and test. It looks so bad to me and I hate that it’s so unpredictable. Is there some setting that I’m missing? It’s such a bummer because It makes me not want to even bother with these cool features, and being able to do this stuff on my own is one of the major draws of Webflow. If anyone else has similar issues or insight into a solution for this, I’d be keen to hear.

Thank you in advance.


Here’s the published page (to view the animation) : https://test-35616a.webflow.io/new-home

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

Hey!
What I do with lotties is create a container (let’s say 100% width, 100vh height, overflow hidden, flex center center) and in it the lottie with position static and minwidth 100Vmax

Lotties, if vector, are scalable so any size should be ok. I tend to decide on dimensions depending on the lottie and its use. I also tend to keep them on the smaller side.

Flickers on load usually are javascript related and when they load but I’m knowledgeable ebought i help with it. :slight_smile: