Call us
Find us

Animate your digital products with Lottie & Bodymovin.

William Christen

William Christen Designer · User Experience & Interface April 2024

Let’s get to know each other!

Hello, my name is William and I am an interface and user experience designer at Apptitude. This article will deal with interface animation in the broadest sense, but, above all, it’s about how tools such as Bodymovin and Lottie could bring your digital products to life.

Here are a few examples of Lottie at work! – Sources – https://airbnb.design/lottie/

 

Why using interface animation?

A few years ago, Flash was one of the only technologies that allowed you to animate a web interface in a fluid way. But since the introduction of HTML5, our websites have been transformed and brought to life thanks to CSS3 which is supported by the largest number of browsers.

In addition to being fun, animation tends to make your product more attractive and successful. It captures attention and helps to convey a message more effectively.

You know the saying, an image is worth a thousand words. So how many words would an animation of 25 frames per second be worth?

Animating an interface provides emotion and creates empathy with your user by linking the real and digital world. Furthermore, it has the ability to transform an unpleasant moment of waiting (loading content, sending forms) by making it more ” flavorful “.

Well… convinced?

Animation directs attention and improves understanding – Sources – https://airbnb.design/lottie/
 

 

Lottie, Bodymovin… What are those?!

Lottie is a cross-platform library (iOS, Android & Web) developed by AirBnB. It allows you to perform animations in.json format exported thanks to the “Bodymovin” extension created by Hernan Torrisi for Adobe After Effects.

Before Lottie, developers had to use larger image formats or animated gifs to integrate complex animations, significantly increasing the weight of a page and slowing down loading. They could also create them “from scratch” in code based on an original animation created by a designer.

But, this development is time-consuming – and therefore expensive – and must be “redone” for each platform… This is why we used to avoid animations in the past. Here is a tutorial for creating an animation in code “from scratch”.

The benefits of using Lottie

Here is a list of some of the many benefits of the library:

  • Simplifies animation processes between designer and developer
  • Reduces loading time
  • Allows quick and easy animation modification
  • It is an open-source library, and therefore free of charge
  • It’ s cross-platform
  • Can be controlled in the code

 

The recipe for designers

A short procedure to follow in order to create a Lottie animation:

  • Find out more about the features supported by the library here
  • Download the Bodymovin extension for after effects
  • Export your animation
  • Test/Modify your animation on lottiefiles.com
  • Test it on your smartphone with the “Lottie Preview” application available for iOS and Android
  • Transfer your .json animation to your developer for integration

 

Exemple of web integration

Insert the lottie-web library in your.html page:

<script src="js/lottie.js" type="text/javascript">

 

Define a container for your animation at the desired place in your.html

<div id="svgContainer"></div>

 

Insert this in the javascript file of your site:

var svgContainer = document.getElementById('svgContainer');
var animItem = bodymovin.loadAnimation({
wrapper: svgContainer,
animType: 'svg',
loop: true,
path: 'monanim.json'
});

 

Conclusion

Today, it is no longer necessary to use heavy image formats to create interface animations. Adding value to your digital products becomes more accessible. So don’t hesitate any longer, get started!

Resources