Lottie Player

Interactivity Guide

This is a quick demo for using the Lottie web player to add interactivity to your applications

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://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.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, 360],
      },
    ],
});
</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 object. This object takes an array named actions which consists of an array of 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 360.

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 next example. If a container is not provided the parent div will be taken as a 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. 

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

<script>
LottieInteractivity.create({
    mode:"scroll",
    player:'#firstLottie',
    actions: [
        {
            visibility:[0,1],
            type: "seek",
            frames: [0, 360],
        },
    ]  
});
</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.
This containers ID is "MyContainerId". The scroll activates in this example once the container with "MyContainerId" is in the viewport. 

<lottie-player id="secondLottie" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    mode:"scroll",
    player: "#secondLottie",
    container: "#MyContainerId",
    actions: [
        {
            visibility:[0,1],
            type: "seek",
            frames: [0, 360]
        }
    ]
});
</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. 

<lottie-player id="thirdLottie" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    mode:"scroll",
    player: "#thirdLottie" 
    actions: [
        {
            visibility:[0,0.3],
            type: "stop",
            frames: [0]
        },
        {
        visibility: [0.3,1]
            type: "seek",
            frames: [0, 360]
        }
    ]
});
</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. 

<lottie-player id="fourthLottie" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    mode:"scroll",
    player: "#fourthLottie",
    actions: [
        {
            visibility:[0, 0.2,]
            type: "stop",
            frames: [0]
        },
        {
            visibility:[0.2,0.45],
            type: "seek",
            frames: [0, 180]
        },
        {
            visibility:[0.45,1.0],
            type: "loop",
            frames: [180, 360]
        }
    ]
});
</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. 

<lottie-player id="fifthLottie" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    mode:"scroll",
    player: "#fifthLottie",
    actions: [
        {
            visibility:[0, 1]
            type: "loop",
            frames: [90, 180]
        }
    ]
});
</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. 
<lottie-player id="seventh" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    mode:"cursor",
    player: "#seventhLottie",
    actions: [
        {
            position: { x: [0, 1], y: [0, 1] },
            type: "loop",
            frames: [180, 360]
        },
        {
            position: { x: -1, y: -1 },
            type: 'stop',
            frames: [180],
          }
    ]
});
</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 interactivity based on the cursors movement. Move your cursor on the animation below. 
<lottie-player id="eightthLottie" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    mode:"cursor",
    player: "#eightthLottie",
    actions: [
        {
            position: { x: [0, 1], y: [0, 1] },
            type: "loop",
            frames: [0, 360]
        }
    ]
});
</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. 
<lottie-player id="ninthLottie" src="https://assets9.lottiefiles.com/packages/lf20_kv7kbdzp.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    player: '#ninthLottie',
    mode: 'cursor',
    actions: [
        {
            position: { x: [0, 1], y: [-1, 2] },
            type: 'seek',
            frames: [0, 360],
        },
        {
            position: { x: -1, y: -1 },
            type: 'stop',
            frames: [0],
        },
    ],
});
</script>
cookie
We care about your data, and we'd love to use cookies to make your experience better.
Privacy Policy