Spice up your website or app w/Lottie

As a motion designer for the past decade and a new Flatiron School student I felt it appropriate to share this neat little plugin that you might want to use to add some flair to your website or iOS / Android app. Lottie is a library designed by the folks at Airbnb that parses After Effects animations exported as JSON w/a plugin Bodymovin so that you can render your animations natively.

image from: airbnb.io/lottie

Even though I love animation, I feel like it’s important to stress that we don’t want to go back to the era of flash animation websites that have a really clunky user experience and slow loading times. I do think that there are plenty of opportunities to add a little bit of flair to your project without hurting any of the user experience.

Getting started with Lottie is really simple and I’m not going to walk you thru that just yet (but if you’re curious here’s a direct link to a walkthru). You basically just download the After Effects plugin and install it, make your animation and export the JSON file and player file. Once that is done you just throw a few lines of code of javascript in and you’re good to go:

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

I’ve prepared an example if you want to see it in use. All I did was Google the Flatiron School logo and pulled that JPG into After Effects. From there I masked out the letters and made a really basic animation to export. Honestly, it took longer to mask out the letters than it took to get it ready for web use.

Here’s my example:

Flatiron School Logo Demo - BASIC

Here’s an example using vector shapes from Bodymovin:

Simple Bodymovin Demo

So, you’re probably asking why you’d use this and why this matters. You can use Lottie on:

• web
• Android / iOS
• React Native
• Xamarin
• Flutter
• (and others)

Seems pretty useful to maintain consistency across multiple platforms while still showing your own flair. Custom loading animations, scroll animations, or user response animations, all without having to waste a lot of time coding animation directly. Animated gifs, while being an easy alternative, are often times more than double the size of the Bodymovin JSON file and are rendered at a fixed size. Play around with my demo and notice how it scales without losing quality.

I’ll be back to post a few more complex examples in the future.