Interactivity Chaining - Examples

Lists several demos of interactivity chaining.

Chaining - Click

The following example sets the forceFlag property to true with the click state to play the animation when you click the container. Lottie-interactivity does not wait for the segment to complete but restarts the animation each time you click the defined number of times.

The animation uses the click transition and a defined number of clicks (5). You have to click the star 5 times before getting to the confetti!

    LottieInteractivity.create({
          player:'#clickInteraction',
          mode:"chain",
          actions: [
            {
            state: 'click',
            forceFlag: true,
            frames: 'star',
            transition: 'click',
            count: 5
            },
            {
              path: 'https://assets1.lottiefiles.com/packages/lf20_ISbOsd.json',
              frames: 'confetti',
              state: 'autoplay',
              reset: true,
              transition: 'onComplete'
            }
          ]
        });

The output is as follows:

Chaining - Hover

The following example sets the forceFlag property to true with the hover state to play the animation when you hover over the container. Lottie-interactivity does not wait for the segment to complete but restarts the animation each time you hover the defined number of times.

The animation uses the hover transition and a defined number of clicks (5). You have to hover over the star 5 times before getting to the confetti!

 LottieInteractivity.create({
              player: '#hoverInteraction',
              mode: 'chain',
              actions: [
                {
                  state: 'hover',
                  forceFlag: true,
                  frames: 'star',
                  transition: 'hover',
                  path: 'https://assets10.lottiefiles.com/private_files/lf30_rsqq11m6.json',
                  count: 5
                },
                {
                  path: 'https://assets1.lottiefiles.com/packages/lf20_ISbOsd.json',
                  state: 'autoplay',
                  reset: true,
                  transition: 'onComplete'
                }
              ]
            });

The output is as follows:

Chaining - Repeat

Use the repeat transition and the repeat property to play the animation the specified number of times before transiting to the succeeding action.

The following example plays the first segment automatically, repeats the animation twice, and finally transitions to the shapes animation.

 LottieInteractivity.create({
              player: '#repeatInteraction',
              mode: 'chain',
              actions: [
                {
                  state: 'autoplay',
                  transition: 'repeat',
                  repeat: 2
                },
                {
                  path: 'https://assets2.lottiefiles.com/packages/lf20_2m1smtya.json',
                  state: 'autoplay',
                  frames: [0, 110],
                  transition: 'onComplete',
                  reset: true,
                }
              ]
            });java

The output is as follows:

Chaining - Hold

Use the hold transition to hover over the animation for the defined number of frames before transitioning to the subsequent action.

If no frames are defined, then hover for the entirety of the animation before transitioning to the next action.

Moving away from the animation plays it in reverse.

    LottieInteractivity.create({
              player: '#holdInteraction',
              mode: 'chain',
              actions: [
                {
                  state: 'none',
                  transition: 'hold',
                  frames: [0, 170]
                },
                {
                  path: 'https://assets4.lottiefiles.com/packages/lf20_7zara4iv.json',
                  state: 'autoplay',
                  transition: 'onComplete',
                  reset: true
                }
              ]
            });

The output is as follows:

Chaining - pauseHold

Use the pauseHold transition to hover over the animation for the defined number of frames before transitioning to the subsequent action.

If no frames are defined, then hover for the entirety of the animation before transitioning to the next action.

Moving away from the animation pauses it.

  LottieInteractivity.create({
              player: '#pauseHoldInteraction',
              mode: 'chain',
              actions: [
                {
                  state: 'none',
                  transition: 'pauseHold',
                  frames: [0, 170]
                },
                {
                  path: 'https://assets4.lottiefiles.com/packages/lf20_7zara4iv.json',
                  state: 'autoplay',
                  transition: 'onComplete',
                  reset: true
                }
              ]
            });

The output is as follows:

Chaining - Sync and Autoplay

Use the seek transition to sync the animation with the cursor's position.

The following example demonstrates syncing the playback of the animation between frames 0 and 30. Once the animation reaches the 30th frame, the subsequent segment is played automatically due to the autoplay state and unlocks the phone.

  LottieInteractivity.create({
          player:'#syncInteraction',
          mode:"chain",
          actions: [
            {
              state: 'none',
              position: { x: [0, 1], y: [-1, 2] },
              transition: 'seek',
              frames: [0, 30],
            },
            {
              state: 'autoplay',
              transition: 'none',
              frames: [30, 160],
            },
          ]
        });javas

The output is as follows:

Chaining - Dynamically Load Animations

Use the path variable in the action to let Lottie-Interactivity load that animation dynamically when the action comes in to play. This convenience saves you from having to manually append animations together and then play segments of the spliced animation.

The following example comprises three different animations. Click the first animation to start the chain!

 LottieInteractivity.create({
            player: '#chainLoad',
            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
              }
            ]
          });

Click the first animation to start the chain!

Chaining - Demonstrating jumpTo

Use the jumpTo parameter with an index number to jump to the indicated action after the current one is complete.

In the following example, after the last action is complete, the animation jumps to the action at index 1.

Index numbers for jumpTo start at 0 and not 1.

   LottieInteractivity.create({
              player: '#jumpTo',
              mode: 'chain',
              actions: [
                {
                  state: 'click',
                  frames: 'circle',
                  transition: 'onComplete',
                },
                {
                  state: 'autoplay',
                  frames: 'triangle',
                  transition: 'onComplete',
                },
                {
                  state: 'autoplay',
                  frames: 'square',
                  transition: 'onComplete',
                },
                {
                  state: 'autoplay',
                  frames: 'brocolli',
                  transition: 'onComplete',
                  jumpTo: 1
                }
              ]
            });

Click the black view port to get started. Notice that one character is only seen once!