Multiple .to() Animations on The Same Element reset the starting value (ScrollTrigger)

[onedesign]

Hey y'all! I'm trying to pull off this effect where the background color of the page changes when you scroll in and out of new sections. I saw this demo that used `onToggle`  to pull of a similar effect, but I'd really like to still leverage the `scrub` feature of ScrollTrigger, and it's my understanding that it doesn't work with toggle actions:

 

See the Pen OJoROgY by GreenSock (@GreenSock) on CodePen.

 

In my simplified demo below I'm attempting to just do it by looping over each section and applying a `.to()` animation on the common background element, but it seems like every time a new section/trigger is activated the `.to()` animation resets the background color of the element to its initial value, rather than just starting from the current background-color value of the element—which is why in my demo you see it flash back to red after each new section is entered. I feel like I'm close, and probably just missing something obvious. Any ideas out there in GSAP land? 

Thanks for your help!

 

See the Pen LEEVqMW by itsmattsoria-odc (@itsmattsoria-odc) on CodePen.

[mvaneijgen]

I would also think that immediateRender: false, would do the trick, but it is always tricky having several tweens animate the same element and then also adding ScrollTrigger to the mix. 

 

What I would do in this case is get the previous color and use a .fromTo() tween, so that I'm sure the colors are what I expect them to be. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening!  

 

See the Pen qEEdvwy?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[onedesign]

@mvaneijgen thanks for such a quick reply! I was really hoping to keep it dead simple and that the general setup of just a .to for each of the sections would suffice, but I'd obviously much rather it be working reliable, so this solution is great. Thanks for your help—I really appreciate it!