If you remove the cursor, the animation pausesĦ) Seek: Sync the animation to the horizontal movement of the cursor to move to the next animation/segment in your interaction chainħ) onComplete: The transition will occur when the animation/segment has finished playing Additional features
If you remove the cursor, the animation plays in reverseĥ) 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. Available interaction chains and eventsĬurrently, 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.ġ) Click: Click to move to the next animation/segment in your interaction chainĢ) Hover: Hover to move to the next animation/segment in your interaction chainĬlicking and hovering can be defined to be performed a certain amount of times for a transition to occur.ģ) Repeat: Play the animation X number of times to move to the next animation/segment in your interaction chainĤ) 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. 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.Īs Lottie-Interactivity works by defining a list of actions, you can define as many interactions as you like. 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 is a new way to interact with Lottie animations when using Lottie-Interactivity. In this blog post, I want to share what's now possible.
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. Up until now, if a Lottie animation was interactive, it was usually with a single interaction (playing on click, hover, seek, loop, toggle, etc.).
0 kommentar(er)
