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.

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.

• javascript
• jquery-waypoints
• lottie
• bodymovin

Share Improve this question Follow asked Mar 12, 2019 at 22:34 Jaron JohnstonJaron Johnston 111 gold badge11 silver badge11 bronze badge

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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 bees 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.

Here a simple solution:

var container = document.getElementById('graph_ani'); animData = bodymovin.loadAnimation({ container: container, renderer: 'svg', autoplay: false, loop: false, path : 'graph.json' });

var animationStart = 0;
$(window).scroll(function(){
    animData.playSegments([animationStart,animationStart+1], true);
    animationStart++;
}

Could use some work to only play when visible and play on scrolldown and reverse on scroll up but works pretty well for a quick snippet.