Lottie animations can make a website feel more interactive and engaging, but loading too many animations at the same time can affect page performance.
For example, a landing page might have five Lottie animations, but the visitor may initially see only one. Loading and initializing all five animations immediately can use unnecessary network and browser resources.
Lazy loading solves this by delaying non-critical Lottie animations until they are close to the user’s viewport.
In this guide, you’ll learn how to lazy load Lottie animations using Intersection Observer, when to use lazy loading, how to optimize animations before loading them, and how to prevent off-screen animations from continuing to consume resources.
What Does Lazy Loading a Lottie Animation Mean?
Lazy loading means waiting to load an animation until it is likely to be needed.
Instead of loading every Lottie animation when the page opens, the browser can wait until the animation approaches the visible area.
The process looks like this:
Page loads
↓
Lottie is below the fold
↓
Don't initialize it yet
↓
User scrolls
↓
Animation approaches viewport
↓
Load Lottie
↓
Play animationThis is especially useful for long pages containing several Lottie animations.
Why Should You Lazy Load Lottie Animations?
A Lottie file isn’t just an image that the browser displays.
Depending on the animation, the browser may need to:
- Download the animation file
- Parse the animation data
- Initialize the Lottie player
- Render the animation
- Continuously update frames while it plays
Doing this for several animations at the same time can increase the initial workload.
Lazy loading allows you to prioritize the content users need first.
It is particularly useful for:
- Long landing pages
- Product feature sections
- Blog illustrations
- Testimonials
- FAQ sections
- Animation galleries
- Footer animations
Should You Lazy Load Every Lottie?
No.
Critical animations should generally be prioritized rather than delayed.
For example, if a Lottie animation is part of your hero section and is visible immediately when the page loads, delaying it could make the page feel incomplete.
A simple rule is:
| Animation | Recommended approach |
|---|---|
| Hero animation | Prioritize |
| Above-the-fold animation | Load early |
| Near the viewport | Load shortly before visibility |
| Below the fold | Lazy load |
| Far below the fold | Lazy load |
| Animation gallery | Lazy load |
The objective isn’t to lazy load everything.
The objective is to load each animation when it actually becomes useful.
How to Lazy Load Lottie With Intersection Observer
The browser’s Intersection Observer API is one of the simplest ways to implement Lottie lazy loading.
It allows JavaScript to detect when an element enters or approaches the viewport.
Instead of initializing the Lottie player immediately, you can wait until its container becomes visible.
Basic workflow
Lottie container exists
↓
Intersection Observer watches it
↓
Container approaches viewport
↓
Initialize Lottie
↓
Load animation
↓
PlayComplete Lottie Lazy Loading Example
The following example uses lottie-web and loads the animation only when the container approaches the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load Lottie Animation</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.spacer {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.animation-section {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.lottie-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<section class="spacer">
<h1>Scroll down to load the Lottie animation</h1>
</section>
<section class="animation-section">
<div
class="lottie-container"
data-animation="https://assets10.lottiefiles.com/packages/lf20_touohxv0.json">
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
const containers = document.querySelectorAll('.lottie-container');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const container = entry.target;
const animationPath = container.dataset.animation;
lottie.loadAnimation({
container: container,
renderer: 'svg',
loop: true,
autoplay: true,
path: animationPath
});
observer.unobserve(container);
}
});
}, {
rootMargin: '200px'
});
containers.forEach(container => {
observer.observe(container);
});
</script>
</body>
</html>How does it work?
The Lottie animation isn’t initialized when the page first loads.
Instead, Intersection Observer watches the animation container.
When the container gets close to the viewport, this code runs:
lottie.loadAnimation({
container: container,
renderer: 'svg',
loop: true,
autoplay: true,
path: animationPath
});The observer then stops watching that container:
observer.unobserve(container);This prevents the same animation from being initialized repeatedly.
Why Use rootMargin?
In the example, we use:
rootMargin: '200px'This tells the browser to trigger the observer slightly before the element actually enters the viewport.
That’s useful because the animation gets some time to download and initialize before the user reaches it.
You can adjust the value depending on your website:
rootMargin: '100px'or:
rootMargin: '300px'A larger value starts loading earlier, while a smaller value delays loading further.
Optimize Your Lottie Before Lazy Loading
Lazy loading controls when an animation loads.
It doesn’t make a large animation file smaller.
For example, if your Lottie file is 1 MB, lazy loading doesn’t turn it into a 300 KB file. It simply delays when that 1 MB resource is requested.
That’s why you should optimize the animation first.
Look for:
- Unnecessary layers
- Excessive keyframes
- Complex vector paths
- Hidden elements
- Unused animation data
- Large embedded assets
You can use the Lottie Wizard Compressor to reduce the size of your Lottie files before implementing lazy loading.
Compress a Lottie Animation with Lottie Wizard
A good workflow is:
Optimize → Compress → Lazy Load → Test
You can also preview and inspect an animation before optimizing it using the Lottie Wizard Viewer.
Pause Lottie Animations When They Are Off-Screen
Lazy loading solves the initial loading problem, but there is another performance consideration.
What happens after the animation has loaded?
If a Lottie animation continuously loops after the user has scrolled past it, the browser may still need to keep updating its frames.
For pages containing many animations, consider pausing animations when they leave the viewport.
The ideal behavior can be:
Animation becomes visible
↓
Play
User scrolls away
↓
Pause
User scrolls back
↓
ResumeThis is different from lazy loading.
Lazy loading controls when the animation is loaded.
Visibility-based playback controls whether an already-loaded animation is playing.
Using both techniques can be useful for animation-heavy pages.
Don’t Forget Reduced Motion
Performance isn’t the only reason to control animation.
Some users prefer reduced motion for accessibility reasons.
You can detect this preference with:
const prefersReducedMotion =
window.matchMedia('(prefers-reduced-motion: reduce)').matches;For users who prefer reduced motion, consider:
- Disabling decorative animations
- Reducing animation frequency
- Avoiding continuous loops
- Providing a static alternative
Important information should remain understandable even when animation is disabled.
Common Lottie Lazy Loading Mistakes
1. Lazy Loading the Hero
Don’t unnecessarily delay an animation that is part of the primary above-the-fold experience.
2. Using Lazy Loading Instead of Compression
Lazy loading doesn’t reduce the actual file size. Optimize and compress your animation as well.
3. Loading Too Late
If you wait until the animation is already visible, users may briefly see an empty container.
Using rootMargin can give the animation time to load.
4. Ignoring Mobile
Always test animation performance on mobile devices and slower network conditions.
5. Letting Off-Screen Animations Play
If an animation doesn’t need to be visible, consider pausing it until the user returns.
Best Lottie Performance Workflow
For most websites, a simple performance strategy is enough:
1. Create the animation
↓
2. Remove unnecessary complexity
↓
3. Optimize the Lottie
↓
4. Compress the file
↓
5. Prioritize critical animations
↓
6. Lazy load below-the-fold animations
↓
7. Pause off-screen animations
↓
8. Test on mobileLazy loading should be one part of your Lottie optimization strategy, not a replacement for optimizing the animation itself.
Frequently Asked Questions
– What is Lottie lazy loading?
Lottie lazy loading means delaying the loading or initialization of a Lottie animation until it is likely to be needed, usually when it approaches the user’s viewport.
– How do I lazy load a Lottie animation?
A common method is to use JavaScript’s Intersection Observer API to detect when the animation container approaches the viewport and then initialize the Lottie player.
– Does lazy loading reduce Lottie file size?
No. Lazy loading changes when the file loads. To reduce file size, optimize and compress the Lottie animation.
– Should I lazy load a hero Lottie animation?
Usually not if the animation is an important part of the above-the-fold experience. Critical content should generally be prioritized.
– Can I pause Lottie when it is off-screen?
Yes. You can detect when the animation leaves the viewport and pause it until it becomes visible again.
– Does lazy loading work with .lottie files?
The same general approach can be used with .lottie files when the Lottie player you are using supports the format.
Conclusion
You don’t need to choose between beautiful animations and good website performance.
The key is to control when animations load and when they play.
For non-critical Lottie animations:
Optimize → Compress → Lazy Load → Pause When Hidden → Test
Use lazy loading for animations below the fold, while prioritizing important hero and above-the-fold content.
With a simple Intersection Observer implementation, you can make animation-heavy pages more efficient without removing the motion that makes the experience engaging.
