Lottie Player

Interactivity Guide

This is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add interactivity to your applications

Animation by KidA Studio

Getting started

Requirements
The Lottie Web Player wrapper is required to use the interactivity library. Click here to view the repository for the player.
Installation
via yarn
yarn add @lottiefiles/lottie-interactivity
via npm
npm install --save @lottiefiles/lottie-interactivity
via cdn
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
Add Lottie component to your html dom.
<lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;">"></lottie-player>
Configure library
<script>
LottieInteractivity.create({
  mode: 'scroll',
  player: '#firstLottie',
  actions: [
    {
      visibility: [0,1],
      type: 'seek',
      frames: [0, 100],
    },
  ],
});
</script>
The name of the player ie: 'firstLottie' in this example is the ID set to the lottie web component on the html page. Configration will contain an actions array. This array takes in multiple action objects. Multiple objects can be added into this array and therefore multiple actions such as "seek","play", "stop" and "loop", can be set.

Each object has a start and end which is essentially a percentage for the height of the lottie container and is a value between 0 and 1. The visibility arrays first value is the start and the second value is the end. This refers to the percentage of the viewport.

Ensure that the ending frame is the frame you want the interactivity to end at. This could be the last frame or a frame of your choosing. In this case it is set to 100.

Configuration modes include "scroll" where the animation will be synced to the scrolling of the window and "cursor" where the scrolling of the animation will be synced to the cursor position within the container.

The configuration can include a container field as shown in the second example "Lottie scroll relative to container". If a container is not provided the Lottie itself will be taken as the container.

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.
Animation by Ilya Pavlov
<script>
LottieInteractivity.create({
  mode:"scroll",
  player:'#firstLottie',
  actions: [
    {
      visibility: [0,1],
      type: "seek",
      frames: [0, 300]
    }
  ]  
});
</script>
                

Lottie scroll relative to container

There may be situations where you would like to wrap the Lottie player inside a container or just in general sync the Lottie scroll with a div on your page. In which case you may pass a container variable with the container id into the action object.
Animation by Mohammed Alruways
This containers ID is "MyContainerId". The scroll activates in this example once the container with "MyContainerId" is in the viewport.
<script>
LottieInteractivity.create({
    mode: "scroll",
    player: "#secondLottie",
    container: "#MyContainerId",
    actions: [
    {
      visibility: [0,1],
      type: "seek",
      frames: [0, 301]
    }
  ]
});
</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.
Animation by 0440 Molly
<script>
LottieInteractivity.create({
  mode:"scroll",
  player: "#thirdLottie" 
  actions: [
    {
      visibility: [0, 0.3],
      type: "stop",
      frames: [0]
    },
    {
      visibility: [0.3, 1]
      type: "seek",
      frames: [0, 301]
    }
  ]
});
</script>
          

Scroll effect with offset and
segment looping

In cases where you would like the animation to loop from a specific frame to a specific frame, you can add an additional object to actions in which you can specify the frames. In the example below, the Lottie loops frame 45 to 60 once 45% of the container is reached.
Animation by Rizwan Asghar
<script>      
LottieInteractivity.create({
  player:"#fourthLottie",
  mode:"scroll",
  actions: [
    {
      visibility: [0, 0.2],
      type: "stop",
      frames: [0]
    },
    {
      visibility: [0.2, 0.45],
      type: "seek",
      frames: [0, 45]
    },
    {
      visibility: [0.45, 1.0],
      type: "loop",
      frames: [45, 60]
    }
  ]
});
</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.
Animation by Andy Dao
<script>
LottieInteractivity.create({
  mode:"scroll",
  player: "#fifthLottie",
  actions: [
    {
      visibility: [0, 1]
      type: "loop",
      frames: [70, 500]
    }
  ]
});
</script>
        

Play segments on hover

To loop certain segments on hover, ensure that the Lottie is already at the frame you want to start the on hover loop from (Check the javascript code to find out how). Once thats done you can use the library's "hover" action to loop the segment. The stop action as shown below is so that the animation is stopped at the 45th frame. When the cursor moves in to the container, the Lottie loops from frame 45 to 60 as long as cursor is inside the container.
Animation by Rizwan Asghar
<script>
LottieInteractivity.create({
  mode:"cursor",
  player: "#seventhLottie",
  actions: [
    {
      position: { x: [0, 1], y: [0, 1] },
      type: "loop",
      frames: [45, 60]
    },
    {
      position: { x: -1, y: -1 },
      type: 'stop',
      frames: [45],
    }
  ]
});
</script>
            

Sync cursor position with animation

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 interactive based on the cursors movement. Move your cursor on the animation below. Moving the cursor from top left of the container to the bottom right of the container completes the animation. The seeking of the animation is synced to the diagonal movement of the cursor. For horizontal and vertical refer to the next example.
Animation by Chetan Potnuru
<script>
LottieInteractivity.create({
  mode:"cursor",
  player: "#eightthLottie",
  actions: [
    {
      position: { x: [0, 1], y: [0, 1] },
      type: "loop",
      frames: [45, 60]
    }
  ]
});
</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. You may interchange the x and y arrays to get the vertical movement of the cursor synced with the animation.
Animation by Gabriela Schmitz
<script>
LottieInteractivity.create({
  player: '#ninthLottie',
  mode: 'cursor',
  actions: [
    {
      position: { x: [0, 1], y: [-1, 2] },
      type: 'seek',
      frames: [0, 179],
    },
    {
      position: { x: -1, y: -1 },
      type: 'stop',
      frames: [0],
    },
  ],
});
</script>
        

Find thousands of free animations for you to make interactive!

Browse animations