Getting Started

npm install --save @lottiefiles/lottie-interactivity

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

<lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;"></lottie-player>

<script>
  LottieInteractivity.create({
    player: '#firstLottie',
    mode: 'scroll',
    actions: [
      {
        visibility: [0,1],
        type: 'seek',
        frames: [0, 300],
      },
    ]
  });
</script>

Sync Lottie with scroll

This section shows an example of a Lottie that is synced with the scroll bar. The scrolling effect is activated as soon as the animation enters the viewport. You may position the Lottie anywhere on your website and the Lottie will seek frame by frame as you scroll down the website.

<script>
  LottieInteractivity.create({
    player: '#firstLottie',
    mode: 'scroll',
    actions: [
      {
        visibility: [0,1],
        type: 'seek',
        frames: [0, 300],
      },
    ]
  });
</script>

Lottie scroll with offset

If you would like to add an offset to the top of the container or player you may add an extra action object to the array. For this example, from 0 to 30% of the container, the lottie will be stopped and from 30% to 100% of the container the lottie will be synced with the scroll.

<script>
  LottieInteractivity.create({
    player: '#thirdLottie',
    mode: 'scroll',
    actions: [
      {
          visibility: [0, 0.3],
          type: "stop",
          frames: [50]
      },
      {
          visibility: [0.3, 1.0],
          type: "seek",
          frames: [50, 240]
      }
    ]
  });
</script>

Play segments

If you would like to play the animation and loop it only from a certain frame to a certain frame, then you can utilize the loop action and frames variable. This example shows an animation looping from frame 70 to 500.

<script>
  LottieInteractivity.create({
    player: '#fifthLottie',
    mode: 'scroll',
    actions: [
      {
          visibility: [0, 1],
          type: "loop",
          frames: [70, 500]
      }
    ]
  });
</script>

Sync animation with cursor position

To progress the animation as you move the cursor either on the Lottie or on a given container, you may use the "cursor" mode. This will make the Lottie interactivity based on the cursors movement. Move your cursor on the animation below.

<script>
  LottieInteractivity.create({
    player: '#eighthLottie',
    mode: 'cursor',
    actions: [
      {
          position: { x: [0, 1], y: [0, 1] },
          type: "seek",
          frames: [0, 280]
      }
    ]
  });
</script>

Sync animation with cursor horizontal movement

To progress the animation as you move the cursor horizontally either on the Lottie or on a given container, you may use the "cursor" mode. This will make the Lottie interactivity based on the cursors movement. Move your cursor on the animation below.

<script>
  LottieInteractivity.create({
    player: '#ninthLottie',
    mode: 'cursor',
    actions: [
      {
          position: { x: [0, 1], y: [-1, 2] },
          type: 'seek',
          frames: [0, 180],
      }
    ]
  });
</script>

Play animation on hover

This section shows an example of a Lottie that is playing when hovered on. Hovering over multiple times won't restart the animation if its already playing. However if you want the animation to restart as soon as it's hovered on set the 'forceFlag' property to true.

<script>
  LottieInteractivity.create({
    player: '#eleventhLottie',
    mode: 'cursor',
    actions: [
      {
          type: "hover",
          forceFlag: false
      }
    ]
  });
</script>

Toggle animation

This section shows an example of a Lottie that is toggled when clicked on.

<script>
  LottieInteractivity.create({
    player: '#toggleLottie',
    mode: 'cursor',
    actions: [
      {
          type: "toggle"
      }
    ]
  });
</script>

Play animation on hold

With the 'cursor' mode and 'hold' type the animation will play when the cursor is placed over the animation, and in reverse if the cursor leaves the animation.

<script>
  LottieInteractivity.create({
    player: '#thirteenthLottie',
    mode: 'cursor',
    actions: [
      {
          type: "hold"
      }
    ]
  });
</script>

Play animation on hold (and pause when released)

With the 'cursor' mode and 'pauseHold' type the animation will play when the cursor is placed over the animation, and pause if the cursor leaves the animation.

<script>
  LottieInteractivity.create({
    player: '#fourteenthLottie',
    mode: 'cursor',
    actions: [
      {
          type: "pauseHold"
      }
    ]
  });
</script>

Lottie-interactivity chaining

Lottie-interactivity now possess' the power to chain different segments of animations depending on how the user interacts (click x amount of times, hover..) with the segment but also with Lottie events (onComplete). By using the 'chain' mode Lottie-interactivity can now manage as many segments as you can fit in an animation.

In this example 3 segments are present. The pigeon running on loop, an explosion and the feathers falling. Click on the pigeon to see it in action!

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

Lottie-interactivity chaining - Click

In this example the 'forceFlag' property is used with the 'click' state to play the animation as soon as you click on the container and won't wait for the segment to end before playing again.

When combined with the 'click' transition and a defined number of clicks (here, 5) the star has to be clicked 5 times before getting to the confetti!

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

Lottie-interactivity chaining - Hover

In this example the 'forceFlag' property is used with the 'hover' state to play the animation as soon as you hover on the container and won't wait for the segment to end before playing again.

When combined with the 'hover' transition and a defined number of counts (here, 5) the star has to be hovered 5 times before getting to the confetti!

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

Lottie-interactivity chaining - Repeat

With the 'repeat' transition the animation will play the number of times you define to the 'repeat' property and then transit to the next action. Here we play the first segment automatically and after repeating the animation twice display the shapes animation.

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

Lottie-interactivity chaining - Hold

The hold transition requires the user to hover over the animation for the defined amount of frames, or if no frames are defined, for the entirety of the animation after which the next action is used. If the user releases the hover over the animation it plays in reverse.

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

Lottie-interactivity chaining - pauseHold

The 'pauseHold' transition works in the same way as the 'hold' transition does, the difference being that if the user releases the hold, the animation is paused. The 'pauseHold' transition requires the user to hover over the animation for the defined amount of frames, or if no frames are defined, for the entirety of the animation after which the next action is used. If the user releases the hover over the animation it pauses.

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

Lottie-interactivity chaining - Sync and autoplay

Syncing to the cursor can be achieved by employing the 'seek' transition. In this example we sync the playback of the animation between the frames 0 and 30. Once the animation attains the 30th frame, the next segment of the animation is played automatically due to the 'autoplay' state thus unlocking the phone.

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

Lottie-interactivity chaining - Load animation dynamically in action

To save having to manually append animations together and then play segments of the spliced animation, you can define a 'path' in the action and let Lottie-Interactivity load that animation dynamically when the action comes in to play. Here we define three different animations and play through them, click on the first animation to start the chain!

<script>
  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
      }
    ]
  });
</script>

Lottie-interactivity chaining - jumpTo

By using 'jumpTo' and an index number we can jump to the indicated action after the current one has finished. In this example after the last action has completed, we jump to the action at index 1, so the triangle segment. Index numbers for jumpTo start at 0 and not 1. Click the example below to get started, can you guess which character goes missing ?

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