Up until now, if a Lottie animation was interactive, it was usually with a single interaction (playing on click, hover, seek, loop, toggle, etc.). With our open-source library Lottie-Interactivity, we're aiming to change the way you can interact with Lottie animations and make it as easy as possible. In this blog post, I want to share what's now possible.
What is interaction chaining?
Interaction chaining is a new way to interact with Lottie animations when using Lottie-Interactivity. This new feature lets you easily set up interactive scenarios where parts or whole Lottie animations can be played in a sequence, depending on many available interactions and player-related events.
Interaction chaining allows you to easily set up scenarios like displaying a success animation when a user clicks or hovers X number of times on a button, looping an animation X number of times and then showing another, holding down on a Lottie until it finishes, or simply autoplay a few animations one after the other without having to stitch them all together manually.
As Lottie-Interactivity works by defining a list of actions, you can define as many interactions as you like.
Available interaction chains and events
Currently, we have seven different ways to interact with Lottie animations within the interaction chaining system, which allow you to move between different segments of animations.
1) Click: Click to move to the next animation/segment in your interaction chain
2) Hover: Hover to move to the next animation/segment in your interaction chain
Clicking and hovering can be defined to be performed a certain amount of times for a transition to occur.
3) Repeat: Play the animation X number of times to move to the next animation/segment in your interaction chain
4) Hold: Hold the cursor on the animation for X amount of frames or until completion to move to the next animation/segment in your interaction chain. If you remove the cursor, the animation plays in reverse
5) pauseHold: Hold the cursor on the animation for X amount of frames or until completion to move to the next animation/segment in your interaction chain. If you remove the cursor, the animation pauses
6) Seek: Sync the animation to the horizontal movement of the cursor to move to the next animation/segment in your interaction chain
7) onComplete: The transition will occur when the animation/segment has finished playing
Additional features
Lottie-Interactivity lets you load animations via a URL, meaning all public Lottie animations on LottieFiles are available and easy to integrate into your interactive scenarios. Loading animations via a URL means that you no longer have to painstakingly concatenate Lottie animations inside After Effects manually but can simply use the 'path' property to load multiple animations.
Useful things like changing the speed of your animation or delaying playback are also available for each part of your interactive scenario.
LottieInteractivity.create({
player: '#chainLoadPlayer',
mode: 'chain',
actions: [
{
state: 'click',
transition: 'onComplete'
},
{
state: 'autoplay',
transition: 'onComplete',
path: 'https://assets6.lottiefiles.com/packages/lf20_opn6z1qt.json'
},
{
state: 'autoplay',
transition: 'onComplete',
path: 'https://assets9.lottiefiles.com/packages/lf20_pKiaUR.json',
reset: true
}
]
});Why did we build this feature?
Currently, in the world of Lottie animations, interactivity can be a hassle to set up and even more so across multiple Lottie animations with varying interactions. With Lottie-Interactivity, we want to create an easy-to-use way to create interactive scenarios while also including ways to change the properties of your animations, such as changing the speed or delaying playback.
Useful links
Discover what interaction chaining looks like for yourself over on our interactivity homepage.
And to get started with interaction chaining, you can find the GitHub page here.
If you enjoy using Lottie-Interactivity, be sure to leave us a ⭐️ on the repository ☺️.
Here's to more interactive experiences!
- Sam from the Open-Source team at LottieFiles
