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({
    player: '#firstLottie',
    mode: 'scroll',
    actions: [
        {
            visibility[0,1],
            type: 'seek',
            frames: [0, 300],
        },
    ]
});
</script>
    
The name of the player ie: 'firstLottie' in this example is the ID set to the lottie web component on the html page. Configuration 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 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 next example. If a container is not provided the parent div will be taken as a container.

Updated

Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.