< Back

September 18th, 2024

Lightweight, Dynamic Web Animations: A Guide to Lottie.

{ Engineering }

Lightweight, Dynamic Web Animations: A Guide to Lottie.

Festus
by Festus

We constantly try to push boundaries to create engaging and seamless customer experiences across our web and mobile platforms. One of the ways we achieve this is through the thoughtful use of animations, which not only enhance aesthetic appeal but also improve customer interactions. Our customers often ask:

“How do you guys animate those icons on your website? They’re really nice! I noticed they weren’t video clips.”

The answer is simple: Lottie animations. While we use a variety of animation libraries, such as GSAP and Anime.js, Lottie has become a cornerstone in our quest to deliver lightweight, scalable, and interactive animations that delight our customers. In this article, we’ll walk you through how we use Lottie animations and how you can implement them in your web projects using JavaScript.

What is Lottie, and why do we use it?

Lottie is a JavaScript library that parses animations exported as JSON files from Adobe After Effects (via the Bodymovin plugin) and renders them natively across platforms. We use Lottie animations for several reasons:

  • Lightweight: Lottie animations are much smaller than traditional videos or GIFs, which improves our website’s load times and overall performance.
  • Scalable: These animations are largely vector-based, so they maintain clarity and sharpness on any screen size.
  • Interactive: Unlike static images or GIFs, Lottie animations can be controlled via JavaScript, giving us the ability to create dynamic, interactive customer experiences.
  • Performance: Despite their complexity, Lottie animations are optimized to perform smoothly across devices, ensuring that our customers have a seamless experience.

Here’s a step-by-step guide to how we implemented a Money Duo animation using the Lottie-web library.

Step 1: Installing the Lottie Web Library

To get started, we install the Lottie-web library using npm:

npm install lottie-web

Step 2: Getting the Animation JSON File

Our design team creates animations in Adobe After Effects and exports them via the Bodymovin plugin, which provides us with a JSON file. This JSON file is what the Lottie library reads and renders.

Here’s a snippet from the Duo animation JSON file:

{"v":"5.9.0","fr":24,"ip":0,"op":393,"w":1205,"h":715,"nm":"Comp 1","ddd":0,"assets":[{"id":"image_0","w":375,"h":54,"u":"images/","p":"img_0.png","e":0}],"fonts":{"list":[{"fName":"BRFirmaCW-SemiBold","fFamily":"BR Firma - CW","fStyle":"SemiBold","ascent":73.199462890625},{"fName":"BRFirmaCW-Regular","fFamily":"BR Firma - CW","fStyle":"Regular","ascent":73.199462890625}]},"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 100","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[215.723,212.064,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.25,0],[0,-159.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.976470649242,0.011764707044,0.031372550875,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic"}

Note: This is just a small portion of the actual Lottie JSON.

Step 3: Adding the Animation to Our Web Pages

Once we have the JSON file, we integrate it into the web page by creating an HTML container. Here’s a basic setup similar to what we use:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie Animation Example</title>
</head>
<body>
    <div id="lottie-container"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>

    <script>
        // Lottie rendering script goes here
    </script>
</body>
</html>

Step 4: Rendering the Animation with JavaScript

The next step is to use JavaScript to initialize and render the Lottie animation. Here’s how we do it:

// Initialize the Lottie animation
lottie.loadAnimation({
    container: document.getElementById('lottie-container'), // HTML element to render animation
    renderer: 'svg', // Rendering mode: 'svg', 'canvas', or 'html'
    loop: true, // Animation loops continuously if true
    autoplay: true, // Animation starts playing on load if true
    path: 'path/to/your/animation.json' // Path to the Lottie JSON file
});

Step 5: Customizing and Controlling the Animation

We often need to control the behavior of the animations beyond simple play and pause. Lottie-web offers several useful methods that allow us to add interactivity:

• Play the animation: animation.play();

• Pause the animation: animation.pause();

• Stop the animation: animation.stop();

• Go to a specific frame and stop: animation.goToAndStop(100, true);

• Go to a specific frame and play from there: animation.goToAndPlay(100, true);

By using Lottie animations, we create customer experiences that are visually engaging, seamless, and fast. These animations help make our platform feel more dynamic and interactive and ensures that we don’t compromise on performance.

The flexibility and scalability of Lottie allows us to incorporate animations across a wide range of devices, guaranteeing a consistent experience whether our customers are on desktop, tablet, or mobile.

Thanks to our incredibly talented design and development teams, Lottie animations have become a central part of the our customer experience, adding a touch of delight to every interaction.