Hi guys. My name is Sergey and i’ve made a website www.atixuniverse.com with a lot of lottie animations. The thing is when i put a full width lottie animation on the top, it loads slower that other site elements, making this other elements stick on top and when lottie finally loaded make this elements move to their place which makes a glitch. I use website builder Elementor with wordpress. Do you know how to fix it ? May be a way to give all elements their loading stack number or something.
Just look at the site and you will see the issue.
Your issue likely stems from how Elementor and WordPress handle rendering and loading of Lottie animations. The glitch you’re experiencing happens because the animation takes longer to load, causing the layout to shift once it’s ready. This is known as Cumulative Layout Shift (CLS), and it can be addressed with a few strategies. Here’s how you can fix it:
- Reserve Space for the Lottie Animation
Ensure that the space where the Lottie animation will load is reserved in advance. This avoids layout shifts.
To do this:
Add a fixed height and width to the container of the Lottie animation via Elementor or custom CSS.
Example CSS:
css
Copy code
.lottie-container {
width: 100%;
height: 500px; /* or the expected height of the animation */
}
This will prevent other elements from “jumping” into the Lottie animation’s space. - Lazy Loading Optimization
Elementor supports lazy loading, but Lottie files might not work seamlessly with default lazy-loading settings.
Use a plugin like WP Rocket or Perfmatters to control the loading priority of Lottie animations.
Ensure that the Lottie animations are preloaded or assigned a high loading priority using a script like:
html
Copy code
Hello Katty. Nothing works.
1 Method : I’ve added the code to the container css and also for lottie file css
.lottie-container {
width: 100%;
height: 500px; /* or the expected height of the animation */
}
and it is not solving an issue, as you could see on video
2 Method. I’ve installed WP Rocket, but can’t figure out what to add to where ?
3 Method. What do you mean by saying Use a Lottie library ? Where this library is and how to use it ?
here is the site www.atixUniverse.com
on every page there is a lottie file on the top, and on every page the content on the bottom of the lottie file jumps to the top and only when lottie file is loading it jumps back in to place
here is the video, of me trying to fix the issue 2024-11-28_19-42-53
Thanks for sharing detailed info.
I solve it. All i needed to do is to set Container Min Height Value. Thank you for a help anyway