Configuration and Usage

Explains how to configure and use the Lottie-Interactivity library to create interactive animations.

The following code snippet demonstrates a sample configuration:

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

The name of the player - firstLottie in the sample configuration is the ID of the lottie-player web component that you use on the HTML page. For example:

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

The configuration includes an actions array. This array defines the actions mode for one or multiple objects.

You can add multiple objects to this array and set actions such as seek, play, stop and loop to animate them.

The configuration for each object has a start and end value between 0 and 1. This value is a percentage for the height of the Lottie container, where 0 indicates 0% and 1 indicates 100%.

The visibility arrays contain these start and end values. For example:

visibility[0,.6] //Begin the action when the Lottie object is starting to be 
                   visible on-screen and stop when 60% of the Lottie object 
                   is visible on-screen.

Ensure that the ending frame is where you want the interactivity to end. This frame could be the last frame or a frame of your choosing.

The configuration can include a container field. If you do not specify a container for the action, the library selects the parent div as the container.

Configuration for React

The configuration for the library remains the same for react apps. However usage and initialization is as follows. Import the create function from the Lottie-Interactivity library and call the create function. With frameworks like React it is ideal to add an event listener that waits for the Lottie player to load before calling the interactivity library. An example is as follows for a very basic react class component.

import React from 'react';
import '@lottiefiles/lottie-player';
import { create } from '@lottiefiles/lottie-interactivity';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); // 1. create a reference for the lottie player
  }
  componentDidMount() {
    // 3. listen for player load. see lottie player repo for other events
    this.myRef.current.addEventListener('load', function (e) {
      // 4. configure the interactivity library
      create({
        mode: 'scroll',
        player: '#firstLottie',
        actions: [
          {
            visibility: [0, 1],
            type: 'seek',
            frames: [0, 100],
          },
        ],
      });
    });
  }
  render() {
    return (
      <div className="App">
        <div style={{ height: '400px' }}></div>
        <lottie-player
          ref={this.myRef} // 2. set the reference for the player
          id="firstLottie"
          controls
          mode="normal"
          src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
          style={{ width: '320px' }}
        ></lottie-player>
      </div>
    );
  }
}

export default App;

Configuration for Vue

The configuration for the library remains the same for Vue apps. However usage and initialization is as follows. Import the create function from the Lottie-Interactivity library and call the create function. With frameworks like Vue it is ideal to add an event listener that waits for the Lottie player to load before calling the interactivity library. An example is as follows for a very basic Vue class component.

<template>
  <!--  1. Create a lottie player with a reference -->
  <lottie-player id="firstLottie"
                 ref="lottie"
                 controls
                 mode="normal"
                 src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
                 style="width: 320px;">
  </lottie-player>
</template>

<script>
  import '@lottiefiles/lottie-player';
  import { create } from '@lottiefiles/lottie-interactivity';

  export default {
  name: 'App',

  mounted() {
    // 2. listen for player load. See lottie player repo for other events
    this.$refs.lottie.addEventListener('load', function() {
      // 3. configure the interactivity library
      create({
        mode: 'scroll',
        player: '#firstLottie',
        actions: [
          {
            visibility: [0, 1],
            type: 'seek',
            frames: [0, 100],
          },
        ],
      });
    })
  }
}
</script>