Reverse animation with hitting scrolltrigger

[ElDedo]

I want to animate my nav container (change background) when hitting a scrollTrigger. Working fine as it should, but I want to reverse the animation when I scroll back to the scrollTrigger again.

 

How di I get this done?

 

This is what I got so far:

 

gsap.to('#navContainer', {
        scrollTrigger: '#backgroundTrigger',
     background: "red",
        duration: 1.2,
        ease: "power4.inOut"
    });

 

[akapowl]

Welcome to the GSAP forums @ElDedo

 

You will likely want to use scrollTrigger as an object for that and in that object define when and how you want to trigger things. Something like this:

 

 gsap.to('#navContainer', {
   scrollTrigger: {
     trigger: '#backgroundTrigger',
     start: 'top top',
     toggleActions: 'play none none reverse',
     markers: true
   },
   backgroundColor: "red",
   duration: 1.2,
   ease: "power4.inOut"
 });

 

For the when, adjust the start and end properties - and for the how, in your case you will likely want to have a look at toggleActions

 

With those you can determine what should happen onEnter, onLeave, onEnterBack and onLeaveBack of the ScrollTrigger.

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

 

Usually to get the best advice possible, you'll want to include a minimal demo of your scenario - because different scenarios may require different approaches. So if this doesn't work for you, that would really be appreciated. Happy tweening!

 

See the Pen YzePOKO by akapowl (@akapowl) on CodePen