Play a Lottie / Bodymovin animation on scroll on an HTML web page

Question

I have been searching multiple forums looking for a solution to this problem- I am trying to code multiple lottie animations to play when each animation enters the browser window on an HTML web page. Does anyone have a working solution?

I have tried a solution using Waypoint.js but unfortunately I could not get any more than one animation to play with that approach. If anyone knows of a way to get Lottie and Waypoint to play nicely together I would appreciate any suggestions.

I am open to any script suggestions even if they require that I load dependencies to make them work. Any help would be greatly appreciated. Also, I should note that I am brand new to Lottie and I am an animator so please leave detailed explanations as I am a beginner with javascript.

Answer 1

After creating an animation, use anim.goToAndStop(0) to pause it:

const animData = ... // Let's pretend that you loaded this from a .json file
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.className = 'myAnimation';

// Create the animation
const anim = lottie.loadAnimation({
  renderer: 'canvas',
  loop: true,
  autoplay: false,
  rendererSettings: {
    context: ctx,
    scaleMode: 'noScale',
    clearCanvas: true,
  },
  animationData: animData,
});

// Go to the first frame and pause
anim.goToAndStop(0);

Then, you can use something like OnScreen (https://github.com/silvestreh/onScreen) to detect when the animation is visible:

import OnScreen from 'onscreen';
const os = new OnScreen();

os.on('enter', '.myAnimation', (element, event) => {
    anim.play(); // If animation becomes visible, play it
});

os.on('leave', '.myAnimation', (element, event) => {
    anim.goToAndStop(0); // If animation goes off screen, reset it
});

The above applies to a single animation, but with some minor tweaking, it could be extended to multiple animations.