Jump to content

Pieter Biesemans

ScrollTrigger - Subsequent ToggleActions cancel each other out

Go to solution Solved by Pieter Biesemans,

Recommended Posts

So I have a website with sections. Some of these have a light background, some a dark. They come from a CMS, so there is no way for me to know beforehand the order of those sections.

I also have an element which is fixed on the screen.


Now what I would like to do is color the fixed element white when it's over a dark background, and black when it's over a white background.


The Pen shows my approach thus far. It works pretty well, toggleActions really takes the brunt of the work. Except when there are multiple dark sections following each other. Then the second, third, ... animation aren't playing. Like the reverse of the previous section cancels out the play from the next.

So my question:
- Is this the right approach? Or is there a better way to achieve this?
- If yes, is there a fix for the issue where repeated sections stop the animation from playing?


See the Pen RwMQwJK?editors=0010 by pieter-biesemans (@pieter-biesemans) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Pieter Biesemans changed the title to ScrollTrigger - Subsequent ToggleActions cancel each other out

... cheating way 🙃

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

(I'll take a proper look at your approach now though)

Link to comment
Share on other sites

Ah ok! So currently if it leaves a black section to enter another black section it's trying to reverse the animation and then immediately play it again.

I think you may be able to get around this with a different overwrite mode. But I think I'd pop the tween out into a callback instead, then check the incoming section's color and update it accordingly.

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

That seems to work without any overwriting needed and no visual flickers. ☺️

Hope this helps!

  • Thanks 1
Link to comment
Share on other sites

Waw Cassie, you are so FAST! I figured I'd ask this question in the evening, so I might have an answer by tomorrow afternoon or something. 😃


The mix-blend-mode cheat would be great, were it not that there'll also be sections with images and different colours than black and white.


I'll have a detailed look at your solution tomorrow, but it seems to work. I'm afraid my practical case will be a bit more convoluted since I have multiple classes I'll need to be watching. But the approach seems clear to me, so the rest is just tweaking.

  • Like 2
Link to comment
Share on other sites

Just a little speedy payback for helping us with feedback on the getting started post  💚

  • Like 2
Link to comment
Share on other sites

  • Solution

So what I ended up doing is create an array of all sections, and an array of the sections with dark backgrounds.

Then I just check if the current section is in the array of dark sections, and adjust the styling accordingly.


Thanks again for putting me on the right track @Cassie!


See the Pen bGvLKvV?editors=0010 by pieter-biesemans (@pieter-biesemans) on CodePen

  • Like 1
Link to comment
Share on other sites

Nicely done! Always a pleasure to see you pop by 💚

  • Haha 1
Link to comment
Share on other sites

Well that reminds me - and I have to offer up a little boring old-man anecdote - because the only people in the world, that can probably appreciate it is the crazy lot around here: 


My challenge was similar: I had (scrollTriggerd) full-size sections. Each of them with an unknown (user changeable) background of type 'cover'.

I each section were 3 elements (a hamburger, a small legal navigation and a description text) - places according to media-queries 'somewhere'.

I ended up, measuring the boundingClient-rectangles for the three elements, then calculated the position and scaling of the background image (trickier than I thought), did an of scoren canvas calculation for each section that is covered by each element and set it to white or black if the average (perceptional) pixel lightness was light or dark. In cases that are hard to decide (large variance) I add a glow or drop-shadow.

Have to repeat on each resize of course...
In 99% of the cases it works our ok. 

End of boring story, but if not al least one of you can appreciate it - probably no one ever will, so please forgive me and feel free to share your crazy stories what you did for perfection. (But please, pleas pretty please. @GreenSock don't make fun of the little people, your level of crazy perfection is out of the world most of the time... :-) )

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.