Horizontal Scroll w/ ScrollTrigger - Change Background Color Scrolling Forwards and Backwards

[Leonardo da Costa]

Hi team! I'm trying to build a horizontal scroll section where the background color fade to a different one whenever the next sections comes into view on scroll. I was able to accomplish this when scrolling forwards during the first time through, however, when scrolling backwards the background stays the same as from the last section. Thank you in advanced for your time, let me know if this is something that is doable. Thanks!

See the Pen qBKjJPG by costaleonardo (@costaleonardo) on CodePen

[Rodrigo]

Hi @Leonardo da Costa and welcome to the GreenSock forums!

 

Just use the toggleActions config in order to reverse the animation when the section enters back into the viewport. This seems to work the way you want:

ScrollTrigger.create({
  trigger: sct,
  start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (maxWidth / (maxWidth - window.innerWidth)),
  // end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
  toggleClass: { targets: sct, className: "active"},
  animation: colorChange,
  toggleActions: "play none reverse none",
});

From the docs:

Quote

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".

You can find out more about it here:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Let us know if you have more questions.

 

Happy Tweening!

[Leonardo da Costa]

Thank you for the fast response @Rodrigo !

 

It's acting a little funky but definitely what I was looking for. Thank you for guiding me towards the right direction! I'll play around and read the docs to have it working properly.

 

Thanks!

 

[Rodrigo]

Hi,

 

The issue seems to be on the start values in the sections ScrollTrigger instances.

 

This seems to be working closer to what you want:

See the Pen XWYeagd by GreenSock (@GreenSock) on CodePen

 

Also I removed a lot of your logic in the loop event since it seemed quite unnecessary and it works better. You still might have to tinker a bit with the start and end values, but hopefully this is a good starting point.

 

Happy Tweening!