Hey guys, I'm a bit embarrassed to post this whole mess here, I bet you have a thousand ways how I could optimize and restructure my code, all comments are welcome.
But my main issue is this: This is a fairly complex (for my abilities at least) animation which was surprisingly easy and intuitive to set up with gsap and the scrollTrigger plugin. It has 8 content section that define the scrollTriggers. Everything works beautifully smooth when you scroll through it at a normal speed. (Only look at the animation please, i didn't copy and paste all the page and font formatting CSS with it, only the stuff necessary for the layout and animation)
The svg "#illu-workdays" is hidden at the beginning and is tweened visible by the third scrollTrigger. It stays on and has some subtweening going on in the next few scrollTriggers but is tweened to autoAlpha: 0 and yPercent: -100 in the 7th scrollTrigger. It then stays hidden.
However, if you scroll super fast all the way down from the top (or, probably a more common case would be using an anchor link jump) to the last section, some unexpected stuff happens. One of the earlier triggers seems to override the one that hides it (since it maybe has duration that's longer than it takes to get to the bottom?) , even though I would expect that the toggleActions ( I set them to "restart complete restart reset") would take care of that?
Do you have any advice on how to approach this issue in particular and maybe a complex scrollTrigger animation like this in general?
Thank you in advance for any help and suggestions, it is highly appreciated!
Kind Regards,
Simon