Lottie - Animation Made Easy

We most recently wrote about motion in UX design, where Lottie Animation is mentioned.

With the arrival of every new prototyping tool comes a promise of easier motion design, "Animate with ease", "add motion to your designs easily". Unfortunately, the problem these tools turn a blind eye to is the handover. A huge problem with adding motion to a design is the bridge between the designer animating it and the developer who must implement it. Allowing a designer to export a video or gif of an animation to send to a front-end developer doesn't help as much as one might think, I may know that the opacity fades from 100% to 63% between the first and 15th frame but how can a developer know this? This is where Lottie comes in. Lottie is a library which renders After Effects animations in real time. Combined with Bodymovin, an After Effects plugin which exports animations as JSON, a designer can simply handoff their animations as JSON code for their front-end developer to integrate in seconds without having to guess Bézier curves, duration, or any part of the animation!

So how does it work?

The first step is installing Bodymovin and downloading Lottie. Next, the designer creates their animation in After Effects as normal and exports the JSON file using the Bodymovin plugin. The designer then sends the JSON file and any assets exported with it to the developer. They create a Javascript file to link to the JSON and add any JS events required to the animation. The last step is linking the new Javascript file and the Lottie Javascript file in the HTML. That's it! It really is as simple as that! There is even support for native iOS, Android and React Native as well as HTML. If the designer wants to make any changes? Simple, they make their changes in After Effects and send the new JSON file to the developer. The developer doesn't have to change anything other than relinking the new file! Allowing developers to integrate animations without having to code gives designers have more freedom in their animations. Designers no longer have to consider whether it is buildable or not or how long it will take to build, if they can create it in After Effects it can be integrated into their app or website. A free designer is a creative designer and that's what we all want right?

Where did it come from?

Lottie is a project from the lovely people over in Airb&b. After discovering Bodymovin they set out to create a flexible animation format which would support as many After Effects features as possible. Released as an open source library, anyone can download Lottie and start working on their own animations. They even have an app so you can see what other designers are creating and perhaps gain some inspiration.

How can we use it?

One of the main ways in which Airbnb use Lottie is to create custom animations within their app. Load animations, reactions when an object is clicked, etc. are just some of the ways in which Lottie can be used to add custom animation to a site or app.  The team recently teamed up the Noun Project and created a set of animated icons as an example or how we can use Lottie.

The hamburger menu above is an example of how an animation which we could use Lottie to run. It seems like a simple animation involving the three lines just turning around, however, the middle line gets longer while the other two lines get slightly shorter. Rather than trying to explain this to a developer, I can just send them a JSON file and it's ready to go! Many features have been built into the library to make it more efficient. One of the most useful is an optional caching mechanism so that animations used often can load a cached copy. This cuts down on load time and making your site run more efficiently. The team behind Lottie are constantly adding more features to the library to make it as usable as possible. These include gradient, type and image support as well as controlling view transitions with Lottie. Therefore it's only a matter of time before we start seeing Lottie in motion across the web.

Interested in finding out more about what Arekibo do? Feel free to contact us on 01-9052030 or Get In Touch.