Animation Modes

Describes the various animation modes.

You can use various animation modes to spruce up your animation.

Scroll

The following example demonstrates how to sync a Lottie animation with the scroll bar. The scrolling effect is activated as soon as the animation enters the view port. You can place the Lottie animation anywhere on your website. The animation seeks frame by frame as you scroll down the website.

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

The output is as follows:

Scroll Relative to Container

To wrap the Lottie player inside a container or sync the Lottie scroll with a div element on your page, pass a container variable with the container ID to the action object.

In the following example, the container ID is MyContainerId. The scroll activates once the container MyContainerId is visible.

LottieInteractivity.create({
              player: "#secondLottie",
              mode:"scroll",
              container: "#MyContainerId",
              actions: [
                {
                  visibility: [0, 1.0],
                  type: 'seek',
                  frames: [90, 123],
                },
              ]
           });

The output is as follows:

Scroll with Offset

To add an offset to the top of the container or player, include an extra action object to the array.

In the following example:

• The animation stops when less than 50% of the container is visible.

• The animation syncs with the scroll when 50% to 100% of the container is visible.

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

The output is as follows:

Scroll with Segment Looping

To loop from a specific frame, specify the starting and ending frames for the loop.

In the following example, the animation loops from frame 45 to 60, once 45% of the container is visible.

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

The output is as follows:

Animate from Specific Frames

Utilize the loop action and the frames variable to play the animation and loop it only between specified frames.

The following example shows an animation looping from frame 70 to frame 500.

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

The output is as follows:

Animate when Visible

Use the scroll mode and the play type to play an animation when it becomes visible on-screen.

In the following example, [0.50, 1.0] means the animation plays when 50% of the container is visible. In contrast, [0, 1.0] means the animation plays when the whole container is visible.

LottieInteractivity.create({
              player:'#twelfthLottie',
              mode:"scroll",
              actions: [
                {
                  visibility: [0.50, 1.0],
                  type: "play"
                }
              ]
            });

The output is as follows:

Animate when visible and play once

Use the scroll mode and the 'playOnce' type to play an animation when it becomes visible on-screen and play once.

In the following example, [0.50, 1.0] means the animation plays when 50% of the container is visible. In contrast, [0, 1.0] means the animation plays when the whole container is visible.

LottieInteractivity.create({
              player:'#twelfthLottie',
              mode:"scroll",
              actions: [
                {
                  visibility: [0.50, 1.0],
                  type: "playOnce"
                }
              ]
            });

Cursor

Play Segments on Hover

To play specific segments on hover, use the cursor mode and the loop action from the frame you want to animate.

The following example demonstrates playing specific frames on hover. The animation loops from frame 45 to frame 60 when you hover over the specified portion of the viewport.

    LottieInteractivity.create({
                  player: "#sixthLottie",
                  mode:"cursor",
                  actions: [
                    {
                      position: { x: [0, 1], y: [0, 1] },
                      type: "loop",
                      frames: [45, 60]
                    },
                    {
                      position: { x: -1, y: -1 },
                      type: 'stop',
                      frames: [0],
                    }
                  ]
              });

The output is as follows:

Sync Animation with the Cursor's Position

Use the cursor mode and the seek action to sync the animation with the cursor's position.

The following example demonstrates this animation.

   LottieInteractivity.create({
                  player: "#seventhLottie",
                  mode:"cursor",
                  actions: [
                    {
                      position: { x: [0, 1], y: [0, 1] },
                      type: "seek",
                      frames: [0, 280]
                    }
                  ]
              });

The output is as follows:

Sync Animation with the Cursor's Movement

Use the cursor mode and the seek action to sync the animation with the cursor's movement.

The following example demonstrates this animation.

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

The output is as follows:

Animate on Click

Use the cursor mode and the click action to animate an object when clicked.

Clicking multiple times will NOT restart the animation if it is already playing.

To restart the animation each time you click on it, set the forceFlag property to true.

The following example demonstrates this animation.

    LottieInteractivity.create({
          player:'#ninthLottie',
          mode:"cursor",
          actions: [
            {
              type: "click",
              forceFlag: false
            }
          ]
        });

The output is as follows:

Animate on Hover

Use the cursor mode and the hover action to animate an object when clicked.

Hovering multiple times will NOT restart the animation if it is already playing.

To restart the animation each time you hover on it, set the forceFlag property to true.

The following example demonstrates this animation.

  LottieInteractivity.create({
          player:'#tenthLottie',
          mode:"cursor",
          actions: [
            {
              type: "hover",
              forceFlag: false
            }
          ]
        });

The output is as follows:

Toggle Animation

Use the cursor mode and the toggle action to toggle an animation each time you click it.

The following example demonstrates this animation:

LottieInteractivity.create({
    player:'#eleventhLottie',
    mode:"cursor",
    actions: [
        {
            type: "toggle"
        }
]
});

The output is as follows:

Animate On Hold

Use the cursor mode and the hold type to play the animation when placing the cursor over it. The animation is played in reverse if you move the cursor away from it.

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

The output is as follows:

Animate On Hold But Pause When Released

Use the cursor mode and the pauseHold type to play the animation when you place the cursor over it, and pause when you move the cursor away.

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

The following example demonstrates this animation style: