To add a Lottie animation to a div using JavaScript, you can follow these steps:
- First, include the Lottie library in your HTML file by adding the following script tag in the head section:
<head>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js”></script>
</head> - Next, create a container div in your HTML file where the Lottie animation will be loaded. For example:
<div id=”lottie-container”></div> - In your JavaScript file, create a Lottie animation object and load the animation data using the
loadAnimation()function. You can then set the animation to play by calling theplay()method on the animation object:
// Create a Lottie animation object
var animation = bodymovin.loadAnimation({
container: document.getElementById(‘lottie-container’),
renderer: ‘svg’,
loop: true,
autoplay: true,
path: ‘animation.json’ // Replace with the path to your animation JSON file
});