ScrollTrigger detect backwards scrolling.

[mso web agency]

I'm trying to create a Background colour changing animation based on data attributes from a section. I have the base logic in place however it doesn't seem to work backwards. The idea is that as a section scrolls into view the background colour would change and stay like that until the endTrigger. Although i tried doing this with a single scrollTrigger but couldn't quite get it right, However this method kind of works going forwards but it's wrong backwards.

The logic isn't quite right but if anyone could point me in the correct direction that would be appreciated!

See the Pen f1a3751119bc3c7ce6139991efd6cbc8 by msoweb (@msoweb) on CodePen

[GreenSock]

It looks like largely logic problems. I wonder if you were trying to do something like this: 

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

 

Here's another demo from our CodePen Collection that does something similar: 

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

 

I hope that helps! 

[Cassie]

Also, just a heads up but safari is really struggling recently to paint big changes like this. I tried a few weeks ago and whole sections of the page were chunked out on scroll 🫠

 

I'd suggest using fixed divs and doing opacity fades instead of targeting background color.

See the Pen 4a679cfaa6f8a96bd83bceaea0fa01b4?editors=1010 by cassie-codes (@cassie-codes) on CodePen