Animate a single element using multiple ScrollTriggers

[Dumbldrr]

Hello everyone! I'm a newbie in GSAP and I've read the documentation as well as common mistakes. But probably I haven't understood everything completely.

 

 

I'm trying to animate a single element using multiple ScrollTriggers. In my demo, there's a set of sections and a fixed overlay. According to my plan, the overlay should change its opacity at certain sections and fade out in the last specific section. I've set up a chain of triggers, but for some reason, when I add the final trigger responsible for the last fade-out animation, tweens breaks, and the overlay's opacity fires at the start.

 

Also, I tried to refactor the tweens using only `.to` with `immediateRender: false`, and the animations work fine, but another bug arises - when I load the page in the middle or at the end of the scroll position, the animations also break. Here's the second demo (you can load it from  mid/end position of the page in debug mode):

 

It seems like I've made some mistakes in the code and I will be very grateful for any advice.

 

See the Pen LYvBqNq by Dumbldrr (@Dumbldrr) on CodePen

See the Pen NWmBOdd by Dumbldrr (@Dumbldrr) on CodePen

[Rodrigo]

Hi @Dumbldrr and welcome to the GSAP Forums!

 

I believe your first demo is working the way you want right?

 

Anyways I made some adjustments to your demo in order to use the data attributes and a common selector for the sections that trigger the animation and came up with this:

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

 

Hopefully this helps.

Happy Tweening!

[Dumbldrr]

Thank you for your help @Rodrigo! Your solution is much more elegant! However, the bug that was bothering me is still there. If you scroll the page (in debug mode on CodePen), for example, to a certain point (as in the attached screenshot) and then refresh the page, scrolling up/down afterward will instantly change the opacity of that section instead of smoothly transitioning as it should with scrub. If you reload the page on the first section or at the very end, everything works fine.

[Rodrigo]

Hi,

 

I think this is a bit of an edge case. This is the best solution I was able to come up with and I can't guarantee you that it'll work 100% of the times, so you'll have to test and see what happens:

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

 

Here is the debug view:

https://cdpn.io/pen/debug/eYojqEB

 

Hopefully this helps.

Happy Tweening!

[Dumbldrr]

Thank you very much, @Rodrigo, for diving into my issue and helping with the solution. I really appreciate it! I've tested it on my local project and everything works. I'll try to learn more how scrolltrigger and scrub works..