Theming
Theme your Lottie animations using the .lss format from lottie-styler.
Lottie styler was designed to revolutionize the way designers and developers interact with Lottie animations. The lottie-styler library introduces LSS, a powerful means of customizing and theming animations. It leverages the simplicity and flexibility of CSS syntax to modify properties of animations, including colors, stroke widths, gradients, and more, while ensuring the animations remain lightweight and high-performing.
dotLottie-js supports adding and bundling LSS files inside of your dotLottie file.
Here you can find the full documentation as well as all of the syntax options available for LSS files because in this section we're going to be focusing on how to add the themes to your .lottie file.
const dotlottie = new DotLottie();
const themeData = "
FillShape {
fill-color: red;
}
";
await dotlottie
.setAuthor('John')
.setVersion('1.0')
.addAnimation({
id: 'lottie1',
data: animationData,
})
// We add the theme
.addTheme({
id: 'theme1',
data: themeData,
})
// We assign the theme to an animation using the animationId
.assignTheme({
animationId: 'lottie1',
themeId: 'theme1',
})
.build();
await dotlottie.download(fileName);
The downloaded .lottie files contains a
themes folder with theme1.lss inside of it.
The manifest.json contains the information from our theme assignment:{
"version": "1.0",
"revision": 1,
"keywords": "dotLottie",
"author": "John",
"generator": "dotLottie-js_v2.0",
"animations": [
{
"id": "lottie1",
"direction": 1,
"speed": 1,
"playMode": "normal",
"loop": false,
"autoplay": false,
"hover": false,
"intermission": 0
}
],
"themes": [{ "id": "theme1", "animations": ["lottie1"] }]
}
Last modified 2mo ago