Chaining

Explains how to combine animation segments and make them more lively.

dotLottie doesn't support chaining

Use the power of chaining to combine various segments of animations based on user interaction with the segment (click x amount of times, hover on the animation, etc.) and Lottie events such as onComplete.

With the chain mode, Lottie-interactivity can manage as many segments as you can fit in an animation.

The following animation contains three segments - the pigeon running on loop, an explosion, and the feathers falling.

 LottieInteractivity.create({
          player:'#explodingBird',
          mode:"chain",
          actions: [
            {
              state: 'loop',
              transition: 'click',
              frames: 'bird'
            },
            {
              state: 'autoplay',
              transition: 'onComplete',
              frames: 'explosion'
            },
            {
              state: 'autoplay',
              transition: 'onComplete',
              frames: 'feathers',
              reset: true
            }
          ]
        });

Click the pigeon to see it in action!

Configuration Parameters

The name of the player - explodingBird - in this example is the ID set to the lottie-player component on the HTML page.

Use the chain mode to activate interactivity chaining.

An actions array serves to configure each segment and interact with it. You can add multiple objects to this array and create diverse ways to interact and transit through various facets of an animation.

Each object in the actions array should contain a state and a transition property mandatorily.

State

State defines how the animation segment plays when loaded and waiting for interaction.

State can have one of the following values:

• autoplay: Plays the animation once on load.

• loop: Loops the animation. Optionally, you can define a loop property to loop the animation x number of times

• click: Plays the animation on click.

• hover: Plays the animation on hover.

• none: Animation does not play.

Transition

Transition defines the interaction that causes Lottie-Interactivity to go to the next interaction link in the chain.

Transition can have one of the following values:

• click: Causes a transition when you click on the animation. Optionally, set the count property to transit after x number of clicks.

• hover: Causes a transition when you hover over the animation. Optionally, set the count property to transit after x number of hovers.

• repeat: Play the animation x number of times before transiting. Set the repeat property to the number of times to repeat the animation before transition.

• hold: Hover over the animation for the length of the frames property to cause a transition. If the cursor leaves the animation, it plays in reverse.

• pauseHold: Hover over the animation for the length of the frames property to cause a transition. If the cursor leaves the animation, it pauses.

• seek: Sync animation with the cursor position. For this transition, you must define a position object as well as a frames array.

• onComplete: Transition occurs after the animation completes playing the defined segment.

• none: Transition does not occur.

Frames

Each link in the interaction chain can have a defined segment of frames to play. The frames array consists of the start and the end frame to play. Lottie-Interactivity plays all frames within this range, including the beginning and the end frames.

As an alternative to frame numbers, you can use named markers can also be used. See this link for more information.

Lottie-interactivity plays the animation entirely if you do not define any frames.

Path

The optional path property defines the location from which to load the animation.

Additional Properties

• jumpTo: [interaction index]: Jumps to the action defined at the submitted index after detecting the necessary interaction.

• reset: [true/false]: Set the reset parameter to true, to revert the animation to the initial transition.

• The lottie-player element fires the transition event every time a transition occurs. The event contains the following details:

  • oldIndex: The pointer to the previous transition

  • newIndex: The pointer to the current transition

• forceFlag: [true/false]: If true, the animation restarts with every click and hover interaction. Otherwise, the animation continues to play without restarting.

• delay: [time in milliseconds]: Delays all interactions and playback of the animation for the specified duration.

• speed: [integer]: Sets the speed of the animation. The default speed of the animation is 1.

Methods

nextInteraction(): Manually cause the animation to go to the next action.

jumpTo(index) : Jump to the action defined at the indicated index.