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..

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.

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. https://codepen.io/Dumbldrr/pen/NWmBOdd 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. https://codepen.io/Dumbldrr/pen/LYvBqNq