Issue with multiple animations and Waypoint.js

[jaronjohnston]

Tell us about your environment Macintosh 10.14

• Browser and Browser Version: Chrome Version 67.0.3396.99

I am having an issue when I try to implement Waypoints (http://imakewebthings.com/waypoints) with Lottie / Bodymovin. The issue is actually mentioned in this previous Github thread here (https://github.com/airbnb/lottie-web/issues/608). I am trying to place multiple animations on a page using waypoint.js and when I try to load two animations only the second animation on the page loads when triggered by the browser and the first animation doesn't load at all. I have tested out a single animation with Waypoint and it works perfectly fine when it is only used on a page once. I suspect that it is either an issue with the player or perhaps with the code that I am using. Here is the code that I have written:

var anim; var anim1 = document.getElementById('lottie') var animation = { container: anim1, renderer: 'svg', loop: false, autoplay: false, /MAKE SURE THIS IS FALSE/ rendererSettings: { progressiveLoad: false}, path: '/main/json/2019/data-compressed.json', }; anim = bodymovin.loadAnimation(animation);

 // SCROLLING DOWN
var waypoint = new Waypoint({
 element: document.getElementById('lottie'),
 handler: function(direction) {
   if (direction === 'down') {
     anim.goToAndPlay(1, true);
   }
 },
   offset: 'bottom-in-view'
})

var anim; var anim2 = document.getElementById('lottie2') var animation = { container: anim2, renderer: 'svg', loop: false, autoplay: false, /MAKE SURE THIS IS FALSE/ rendererSettings: { progressiveLoad: false}, path: '/main/json/2019/data.json', }; anim = bodymovin.loadAnimation(animation);

 // SCROLLING DOWN
var waypoint2 = new Waypoint({
 element: document.getElementById('lottie2'),
 handler: function(direction) {
   if (direction === 'down') {
     anim.goToAndPlay(1, true);
   }
 },
   offset: 'bottom-in-view'
})

Can anyone suggest a solution to this problem? Or do you see anything obviously wrong with the code that I have written? I am relatively new to javascript so any suggestions would be helpful.

[bodymovin]

Hi from a quick look at it, you're using the variable anim for both animations so one declaration will overwrite the other one. Try fixing that renaming the second animation and see if it works.

[jaronjohnston]

This solution works perfectly. Thank you!