Simple Interactions With Lottie Animations in Javascript (click + hover)
In this article I will be showing you how to get started with Lottie animations and adding simple interactions to your animations. Let’s start with loading an animation.
1) Getting lottie-web in to your web page
You can get lottie-web via CDN by adding the link in the header of your HTML page:
<head>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/lottie- web/5.7.14/lottie.min.js”></script>
</head>Or by getting it via npm:
npm install lottie-web2) Adding a container in HTML
We need to add a container element to contain our Lottie animation:
<div id="container" class="container"></div>And leave it empty as such.
3) Loading the animation
Now we’re going to head in to our javascript code and load up the animation using lottie-web that we’re getting via the CDN or package manager.
First of all we need to save the container element in a javascript variable:
let container = document.getElementById("container");
let animation;We also declare the variable ‘animation’ to contain our loaded animation data so that we can add event listeners to it later on.
Now let’s load up the animation:
animation = lottie.loadAnimation({
container: container,
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://assets9.lottiefiles.com/packages/lf20_rcuthdnb.json'
});As we set ‘loop’ and ‘autoplay’ to false the animation won’t be animated but you should see the first frame of it if everything went well. Feel free to set them to true to try it out, but for the next step with adding interactions we need them to be false.
4) Adding interactions
Our clicking and hovering interactions will play the animation only when it has finished playing it’s current loop so lets add a new variable ‘animationCompleted’ to keep track of that. Our code becomes:
let container = document.getElementById("container");
let animation;
let animationCompleted = true;To keep track if a Lottie animation has finished playing we need to listen to the ‘complete’ event. Underneath the bit of code where you called lottie.loadAnimation lets add:
animation.addEventListener("complete", () => {
animationCompleted = true;
});This will take care of keeping track of the state of the animation, more precisely when it has finished playing.
Let’s add our click listener on to the animation container element:
container.addEventListener("click", () => {
if (animationCompleted) {
animation.goToAndPlay(0, true);
animationCompleted = false;
}
});When we click on our animation container we check if the animation has finished playing and call ‘goToAndPlay’ which will go to frame 0 and start playing the animation. We also set animationCompleted to false so that if we click whilst the animation is playing, it won’t start over.
Heres what hovering looks like:
container.addEventListener("mouseover", () => {
if (animationCompleted) {
animation.goToAndPlay(0, true);
animationCompleted = false;
}
});And thats it! It’s really simple to add interactions to Lottie animations and if you check out some of the listeners and methods lottie-web provides, you can come up with even more of them!
I’ve created two codepens for hovering and clicking if you want to see the results:
However, if you’re just looking to use Lottie animations and not bother about interactivity code my simple Lottie-Interactive element can take care of that and contains many different interaction types. It’s open-source and easy to use so go check it out!
If you’re looking for more Lottie tutorials and tips, you can find me on YouTube.
Thanks for reading, hope it helped!
