changing body background color - toggleActions

[Nora 2 Likes (Newbie)]

hello, I'm Trying to change body background color depends on where the user scrolling,

at begging it's blue background then at section two on h1 tag it's black and at slider it's red 

the animation reverse using toggleActions 

so when I scrolling back to section two on h1 tag it should be black background not blue

 

See the Pen oNPzWQw by nora10 (@nora10) on CodePen

[GreenSock 18,256 Likes (Superhero)]

It looks like you just had your toggleActions wrong: 

// BAD
toggleActions: "play none reverse none"

// GOOD
toggleActions: "play none none reverse"

And this is not a valid start value: 

// invalid
start: "-=200top top"

I'm not sure if you meant "top top" or "200 top" or something else. 

 

But actually, if I were building this I'd approach it in a very different way:

1. Put the color/backgroundColor into a data-color attribute on any element that I want to have this effect (a space-delimited value like "blue white") 
2. Grab all the elements that have that data-color attribute, loop through them and create a ScrollTrigger for each. When it activates, create a new tween that animates to its colors. 

Here's a demo with my strategy implemented: 

See the Pen OJoROgY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Benefits: 

• You can easily add as many sections as you want - just slap a data-color value on it in the markup and BOOM, it works. 
• It works more smoothly if you scroll very quickly. With your previous strategy, you had one animation for each section, and you were calling play()/reverse() on them when necessary...but they were controlling the same properties of the same object.  Imagine a scenario where the user scrolls quickly, so one animation starts and is midway through when the other animation gets triggered. Now you've got two animations fighting for control of the same properties. Plus you may see a jump because let's just say (to make it simpler) we're animating a number from 0 to 100 in the first one, and 100 to 200 in the second animation. If the first animation is at 50 when the second one starts playing, you'd see it jump from 50 to 100 instantly (and go to 200). With my strategy above, a new tween gets created each time so that it's just taking the value from whatever it currently is to the new value. So everything is perfectly smooth every time. No fighting for control (it has overwrite: "auto"), no overlapping. 

I hope that helps.