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.

Unfortunately, animations slow down your site, so are usually the first things to go during a campaign to optimise page load speed. Rewriting a JavaScript animation is complicated and extremely time-consuming (and you can’t do much to improve performance of a GIF other than rotating it 90 degrees and rotating it back) so we might recommend to remove unnecessary animations from the site completely as we attempt to improve search rankings by improving page speed.

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.

Want to see it in action? Claypenny.co.uk and Yes.tax, built by our friends at Über Agency, feature animations loaded using Lottie front and centre.

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/.