How Do You Reverse an SVG / Lottie Animation With Timeline and ScrollMagic?

[mjray]

Hey All - I'm using ScrollMagic and Timeline and Lottie and I cannot for the life of me figure out how to reverse this animation - anyone know how this would be done? The below animation works to animate the SVG forwards, but cannot figure out the reverse.

   

   var controller = new ScrollMagic.Controller();
    var home_section_1 = new TimelineMax();

    var animation = bodymovin.loadAnimation({
      container: document.getElementById('home-welcome-lottie'),
      path: 'https://uploads-ssl.webflow.com/61967dbb50eec57a4e7fde97/61c24a15adb4d67e7bc1acb8_Homepage%20Hum%202.json',
      renderer: 'svg',
      loop: false,
      autoplay: true,
      name: "Hum",
    });

    home_section_1.to({frame:0}, 1, { frame: animation.totalFrames-1,
      onUpdate:function(){
        animation.goToAndStop((Math.round(this.progress() * 150)), true) },
      ease: Linear.easeNone
    });

    new ScrollMagic.Scene({ triggerElement: '.home-welcome-content', triggerHook: 'onLeave',
        duration: 1000, offset: 0 }).setPin(".home-welcome-content").addTo(controller)
        .setTween(home_section_1);

[GreenSock]

Welcome to the forums, @mjray. It looks like you're using ScrollMagic which is a 3rd party library we don't support here (I'd strongly recommend switching to ScrollTrigger - a tool integrated with GSAP and does everything ScrollMagic does plus a lot more) and I'd also recommend updating to the more modern GSAP 3 syntax (the syntax you're using is many years old). 

 

There's a helper function in the docs for integrating Lottie with ScrollTrigger. https://greensock.com/docs/v3/HelperFunctions#lottie

 

Currently your .to() animation is going from frame 0 to the final frame, so you should just invert those if you want to play it backwards. 

 

If you still need help, please provide a minimal demo (like in CodePen) and we can take a peek. 

[mjray]

Awesome, thanks for this info @GreenSock - that's really helpful. I have a related question about ScrollTrigger - I was wondering if it's possible to add smoothing to scroll animations using ScrollTrigger - for example if a users scrolls really quickly to have the animation catch up in a smooth way. Is there a way to do that for Lottie and for regular timeline events with ScrollTrigger? Maybe smoothing isn't the right word, hopefully that makes sense.

[OSUblake]

Hi mjray,

 

I'm not exactly sure by what you mean by catching up. If you're using scrub, that is all based on how fast the user scrolling, but maybe you meant something else. A minimal demo showing what you mean would be really helpful.

 

[GreenSock]

Like Blake said, if you just set scrub: 1, for example, it would smooth it out and take 1 second to “catch up” to the scroll position. If you need more assistance, please provide a minimal demo and we’d be happy to take a peek.

[mjray]

Awesome, that did the trick!