Lottie files add class/ID to svg elements to animate them in CSS

You can add IDs to elements to Lottie files to then animate the svg elements in CSS (page load, rollover, etc). Simply add “#” to your layer name using unique names for each layer you wish to target.

How to add IDs to Lottie files svg elements?

“name your layers starting with a “.” or a “#” and they will get exported with the name as a class or an id respectively” – source: github

For instance, you can have a Lottie loop but, do animation on elements on page load / entering the viewport. Or you can do CSS/JS animations for rollovers, for instance.

https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript

Notes for animations:

– we can’t call 2 layers with the same name. IDs need to be unique per page. And they are case-sensitive.
– we can’t have an ID starting with a number so for instance “#100km”, “#300m” are not valid names in CSS. A solution is to add a prefix. Ie: #txt-100km
– opacity settings on layers can’t be overridden in the CSS, you either need to remove those setting or have a group around the element with just the ID name.  

You can’t use the lottie-player library (@lottiefiles/lottie-player). You need lottie-web or bodymovin
https://github.com/airbnb/lottie-web

Install the node module

# with npm
npm install lottie-web

In my JavaScript file, I have the import at the top

import lottie from "lottie-web";

Then a call to load my lottie file

const lottieData = $('#animation-lottie').attr('data-src');
const lottieAnimation = lottie.loadAnimation({
container: document.getElementById('animation-lottie'), // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: lottieData // the path to the animation json
});

HTML is just a div, I also use a data src to indicate the path of the file

<div id="animation-lottie" data-src="media/data/lottie-file.json"></div>

CSS I toggle a class is-inview when the elements are in the viewport and change the CSS

#factory {
    opacity: 0; 
    transition: all 0.6s ease;
    transition-delay: 0.3s;
}
// etc...

.is-inview {
    #factory {
        opacity: 1; 
    }
    // etc...
}

Happy Lottie files animations!