Load animated files almost instantly with Lottie
Stephen Kenwright CCO & Co-founder
2 min read
Thursday, 17th October 2019
Updated: Tuesday, 15th February 2022
Animation is used in web design to demonstrate products and services or highlight statistics in charts (think bar chart races); highlight actions (using microinteractions), potentially improving conversions; or simply to draw attention to branding, often in the form of a preloader for large websites.
Recently, however, we’ve been using Lottie to load animated files almost instantly - so we can usually keep this useful UX feature without a meaningful impact to our page load times (and therefore our rankings).
What is Lottie?
Lottie is an iOS, Android and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Currently solids, shape layers, masks, alpha mattes, trim paths and dash patterns are supported.
Using Lottie, it’s possible to bundle vector animations into small files that can load quickly: in effect, animations are turned into static images. Animations are exported as JSON files via an open-source After Effects extension called Bodymovin (get it here). You’ll need to use
It’s not just a win for SEO, though: exporting animations straight from After Effects means that developers do not have to spend time painstakingly re-writing the files in the first place.
Why you should use Lottie to load animations
- Lottie supports loading JSON files over the network, which is useful for A/B testing
- Frequently used animations (pins for all your location pages, for example) can be cached, reducing subsequent load times
- Animations exist in smaller SVG files (just be careful if you’re using images to link to other pages)
- There’s an entire library of existing animations on https://lottiefiles.com/ and a LottieFiles Twitter account sharing new additions...and another library of resources at https://useanimations.com/.