Lottie
Lottie lets a website play sharp, light animations that scale to any screen. It suits product diagrams, icons and short explainers that need to move.
What Lottie is
Lottie is an open animation format. Animations are stored as JSON, or in the compressed.lottie format, and played by a small runtime in the browser. Most Lottie files are made in After Effects and exported with a plugin, or made in tools that export Lottie directly.
How it fits on your site
Webflow supports Lottie natively. You upload the file, place it on the page and control playback with interactions, such as on load, on click or as it scrolls into view.
Framer plays Lottie files with its Lottie component, with settings for playback, looping, speed and direction.
A typical use is a product diagram that draws itself as the visitor scrolls, so each step appears as the copy reaches it.
Where the scope includes motion, we design the frames in Figma and prepare the animation for the site.
What you get
Lottie files sized and tested on desktop and mobile
Playback set for each placement: on load, on click or as it scrolls into view
Source files handed over with the site
What to watch out for
The format has limits
Some After Effects features don’t play back in Lottie. The LottieFiles plugin checks which ones an animation uses, so design for the format from the start.
File size
Complex files can get heavy. Check the size and test on a mid-range phone.
Reduced motion
Large or looping animations should respect the visitor’s reduced-motion setting.
Editing later
Changing a Lottie means going back to its source file. Keep the source with the site.
Questions about Lottie
Daniel G. Bright
Founder, BrightStudios
Still have a question?
Book a call with me to talk through your project and agree the next step.
Related
Framer
Marketing sites your team can edit visually, with a component system and a CMS. We’re an Official Framer Expert.
Webflow
Structured websites with a flexible CMS and reusable components for ongoing publishing.
After Effects
Motion delivered as video, Lottie or native animation, depending on what the page needs.
Rive
Animation that responds to the visitor.
Tell us what your site connects to
Share your product and the tools your team uses. We’ll recommend a scope and the simplest way to connect each one.