What Is LottieFiles?
LottieFiles is a platform built around Lottie, an open animation format based on JSON, a simple text format for data. Lottie stores an animation as vector shapes and movement rather than frames, so it stays sharp at any size and is usually far lighter than a GIF or video of the same motion. The format grew out of Bodymovin, a plugin for After Effects, and in 2017 Airbnb's team released the first Lottie libraries for iOS and Android.
Founded in 2018, LottieFiles began as a community for sharing Lottie animations and grew into a set of tools around the format. It offers a library of ready-made animations, plugins that export from After Effects and Figma, Lottie Creator for animating directly in the browser, an open-source web player, and tools to preview, optimize and convert files. It also created dotLottie (.lottie), an open format that packs one or more animations with their images and fonts into a single compressed file.
A dotLottie file can also carry themes, such as light and dark versions of the same animation, and state machines that make it respond to hovering and clicks without extra code. Since 2024 Lottie has had an open specification, published by the Lottie Animation Community. LottieFiles can be used for free to preview, test and share animations, with paid plans for individuals and teams.
Where We Use LottieFiles
Lottie is our first choice for small vector animations on websites, and with LottieFiles we prepare them for:
Animated Icons
Icons that respond to the cursor or confirm an action, such as a menu icon that turns into a close button or a tick that appears after a form is sent. The files are tiny and stay sharp on every screen.
Loaders and Status Messages
Loading indicators, empty states (screens with nothing to show yet) and success or error messages feel friendlier with a little motion. We keep them short and calm, so they inform the visitor without getting in the way.
Illustrations and Onboarding
Illustrations in the brand's style come to life on landing pages, and step-by-step screens explain a product or an app's first use. Lottie keeps them light enough to load quickly on phones.
Brand Animations on the Site
The logo animation we design in After Effects can also play in the site's header or opening screen as a Lottie file, so the brand moves the same way on video and on the web.
Why LottieFiles?
Light and Sharp
Vector animations scale to any screen without blurring and are usually much smaller than a GIF or video of the same motion, which helps pages load faster.
Controlled in Code
On the site we can play, pause or loop an animation, or tie it to scrolling and hovering, and with dotLottie themes it can follow the site's light and dark modes.
From Design to Code in One Step
Plugins for After Effects and Figma export straight to Lottie, and a shared preview link lets you check the animation on your own phone before it goes into the site.
How We Work on Your Project
We design animations in After Effects, or simpler ones in Lottie Creator, using only features the Lottie format supports. We export them with the LottieFiles plugin, preview them on desktop and mobile, and send you a link to review before they go into the site.
Before launch we optimize each file, choose between JSON and the smaller dotLottie, and load animations only when they come into view. Visitors who have turned on “reduce motion” see a still frame instead, and we measure the page's speed with PageSpeed Insights and Lighthouse.
