Lottie integration
Lottie is a vector animation format, exported from After Effects and played in the browser by a small runtime. Webflow plays Lottie natively, Framer uses the LottieFiles plugin, and on Astro or Next.js we use the official dotLottie players. We design the motion, export it, and load it only when it scrolls into view.
| Complexity | Low |
|---|---|
| Method |
|
| Typical setup | 2 to 4 hours per animation |
| What we do | We design and export the animation, choose the lightest player for the page and lazy-load it. |
| Category | Animation |
Setup by platform
How we set up Lottie
Framer
- Native
The LottieFiles plugin for Framer inserts Lottie and dotLottie files as a media component, with themes and interactivity. Community components add scroll or viewport control when we need it.
Webflow
- Native
Webflow’s native Lottie element plays JSON and .lottie files uploaded to the Assets panel. Loop, autoplay, speed and direction are set on the element, and Interactions tie playback to scroll, hover or click.
Astro
- API
We use @lottiefiles/dotlottie-web in a small client script, or the React player in an island hydrated with client:visible, so nothing loads until the animation is near the viewport.
Next.js
- API
@lottiefiles/dotlottie-react plays both .lottie and .json files. For one small icon we may use the lighter lottie-web renderer or plain CSS instead.
Use cases
What teams use it for
Animated icons and states
Feature icons, loaders, success ticks and empty states that explain a product in a second.
Scroll stories
A hero or a how-it-works section that plays as the visitor scrolls, without a heavy video.
Light and dark themes
dotLottie themes swap colours with the site theme, so one file works in both modes.
Before you add it
What to watch out for
Performance
The player has a cost too
The dotLottie player loads a WASM engine of about 500 KB compressed first. For one icon, CSS or lottie-web is lighter; for many animations, it pays off.
Performance
Prefer .lottie over JSON with images
JSON Lottie embeds images as Base64, which bloats files. The .lottie format zips the animation and its assets and can hold themes and state machines.
Consent and GDPR
Third-party requests
By default the dotLottie engine loads from a CDN. If your privacy policy limits third-party requests, we self-host the files.
FAQ
Questions about Lottie
JSON Lottie or .lottie?
Both play in Webflow and in the dotLottie players. We default to .lottie because it is a compressed container that can also carry several animations, themes and interactivity.
Why does a Lottie appear late on first load?
The WASM engine has to download and compile before the first frame. We preload it on pages where the animation sits above the fold, and lazy-load it everywhere else.
Lottie or Rive?
Lottie is great for linear animations exported from After Effects. Rive is better when the animation reacts to input, like hover, clicks or live data, through state machines.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call