Jump to content
Search Community

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

mjray test
Moderator Tag

Recommended Posts

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);

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...