Interactivity
Embed interactivity configurations inside your .lottie file by defining state machines.
dotLottie files can contain multiple state machine definitions allowing you to easily add and playback lottie animations with complex interactions without writing code. You define your state machines with dotLottie-js, export your .lottie file and use the dotLottie players to load up your animation and state machine config, allowing you to have deeply interactive animations without having to write interactivity code yourself.
const pigeon = new DotLottie();
await pigeon
.addAnimation({
id: 'pigeon',
url: 'https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json',
})
.addStateMachine({
descriptor: {
id: 'exploding_pigeon',
initial: 'running',
},
states: {
running: {
animationId: 'pigeon',
playbackSettings: {
autoplay: true,
loop: true,
direction: 1,
segments: 'bird',
},
onClick: {
state: 'exploding',
},
},
exploding: {
animationId: 'pigeon',
playbackSettings: {
autoplay: true,
loop: 1,
direction: 1,
segments: 'explosion',
},
onComplete: {
state: 'feathers',
},
},
feathers: {
animationId: 'pigeon',
playbackSettings: {
autoplay: true,
loop: false,
direction: 1,
segments: 'feathers',
},
onComplete: {
state: 'running',
},
},
},
})
.build()
.then((value) => {
return value.toArrayBuffer();
})
.then(async (value) => {
const filename = 'pigeon.lottie';
console.log('> Writing to file: ', filename);
fs.writeFileSync(filename, Buffer.from(value));
});
In this example we add our animation and then our state machine definition. Let's look at the different parts of our state machine.
Descriptor
descriptor: {
id: 'exploding_pigeon',
initial: 'running',
}
Firstly we define a descriptor. The descriptor contains the id of this state machine as well as an initial state.
States
Next we define our various states inside the states object
states: {
running: {
animationId: 'pigeon',
playbackSettings: {
autoplay: true,
loop: true,
direction: 1,
segments: 'bird',
},
onClick: {
state: 'exploding',
},
},
...
}
We define a
'running' state and include the optional 'animationId' that we set to 'pigeon', the same animation id we declared when calling 'addAnimation'.
Then we set the playback settings we want our animation to have when entering this state. These are the same playback settings available in the manifest and two others (segments and playOnScroll). You can find the detailed list of playback settings here.Lastly we define our transitions. Transitions are events that need to happen for the state machine to enter another state. Here we use
onClick and define which state we want to go to when that happens.The full list of available transitions is visible here.
This is the result of the full state machine in action!
Last modified 1mo ago