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.
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!