How to Add JSON Animations to HTML

Lottie is a revolutionary file format that makes it easier to add animations to web pages. However, since HTML5 cannot natively render JSON-based animations, we need to use the Bodymovin plugin along with some JavaScript to support this format.

Step 1: Create your JSON file using Adobe After Effects, or download a JSON file from the LottieFiles website. The choice is yours, depending on your needs.

Step 2: Import the Bodymovin CDN JavaScript file into the section of your HTML file:

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js

Step 3: Add a container. This is the HTML element where the animation will be displayed. For example:

div id="weather-sun"

Step 4: Call the bodymovin.loadAnimation function to load and configure your animation:

var animation = bodymovin.loadAnimation({

    container: document.getElementById('weather-sun'), // Container ID

    path: 'https://api.jsonbin.io/v3/b/673db4e7ad19ca34f8cd1da2', // URL of the JSON animation file

    renderer: 'svg', // Rendering type

    loop: true, // Enable looping

    autoplay: true, // Enable autoplay

    name: "Weather Sun", // Optional animation name

});

Step 5: Done! Your animation is now ready. Enjoy the result!

Final Words

Although adding a JSON file to HTML is more complex than simply embedding code, it offers greater flexibility for customizing animations once you understand the Bodymovin plugin. We highly encourage learning to use JSON animation files, as they provide the freedom to manipulate elements like speed, delay, triggers, and more, unlocking a world of creative possibilities.