Using Bodymovin and Scrollmagic to animate as you scroll

Question

I am using Bodymovin in combination with ScrollMagic and GSAP to animate through series of images as you scroll back and forth. Everything works great, except, when I reach the end it doesn't stay on the final image, but goes white.

Libraries that I load first:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

Then my code:

var controller = new ScrollMagic.Controller();
var animation = bodymovin.loadAnimation({
  container: document.getElementById('hero-anim'),
  animationData: animationframes,
  renderer: 'svg',
  autoplay: false,
});
var tl = new TimelineMax();
tl.to({frame:0}, 1, {
  frame: animation.totalFrames-1,
  onUpdate:function(){
    animation.goToAndStop((Math.round(this.progress() * 60)), true)
  },
  ease: Linear.easeNone
})
var lottieScene = new ScrollMagic.Scene({
  duration: '100%',
  offset: 600
})
.setPin("#hero-anim")
.setTween(tl)
.addTo(controller);

Any ideas what could be causing that? Looking at browser's Inspect Element, it basically adds display:block to the image that is supposed to be currently visible and applies display:none to the previous image, but at the end, they all have display:none, and it doesn't stay visible

Try Math.floor instead of Math.round. – Zach Saucier Apr 29 '20 at 17:53 — Zach Saucier, Apr 29 '20 at 17:53
Didn't help unfortunately, exactly the same behaviour :/ – user1207524 Apr 29 '20 at 18:02 — user1207524, Apr 29 '20 at 18:02

score 0 · Answer 1 · answered Apr 29 '20 at 18:18

RESOLVED As Zach pointed out, I tried Math.floor and at first it didn't help, but afterwards I tried adjusting animation.goToAndStop((Math.floor(this.progress() * 60)), true) to * 59 (one frame less than the total frame count and now it works, perfectly. Math.round with * total frame count or even * total frames - 1 didn't work, strangely.

Using Bodymovin and Scrollmagic to animate as you scroll

1 Answers1