scrollTrigger issue with anchor link or fast scroll past

[Schweinedog]

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

See the Pen XWXjVQd by saiminh (@saiminh) on CodePen

[ZachSaucier]

Hey Schweinedog and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member! 

 

It sounds like your assessment is fairly spot on - there are conflicting tweens and the properties are not what you expect them to be if you scroll fast. There are a couple of ways you can handle that sort of thing:

1. Use .fromTo()s on the relevant tweens. That way you know for sure that it will start and end with the correct values.
2. You could refractor your code to use one big timeline and tween that timeline using labels when you reach each section.

What you say about "restart complete restart reset" being enough makes some sense but it's hard to say if there's a bug in ScrollTrigger or not related to it because you have so much going on. If you're able to boil it down to just the problematic parts and nothing more that'd be very helpful for us in debugging.

[GreenSock]

First of all, cool animation! Very nice work. Happy to hear it was so easy to set up with GSAP and ScrollTrigger. 

 

I believe the problem is here: 

let triggerStressIn_scrub = { trigger: "#section_stressAndBurnout", start: "0% center", end: "25% center", scrub: .5 };

That ScrollTrigger has a half-second delay on the scrub, thus when you scroll down really fast the other animations fire correctly and set the opacity (well, autoAlpha) to 0 but that scrubbing timeline keeps going for 0.5 seconds to "catch up", and it's the one setting autoAlpha to 1. So from what I can tell, this isn't a bug or an issue in GSAP/ScrollTrigger - it's just a logic issue in the way you've got things set up. And remember that toggleActions do NOT apply to scrub ScrollTriggers because that wouldn't really make sense. A ScrollTrigger is EITHER a scrub or a toggle. It either is directly linked to the scrollbar to control its progress, or it fires off instructions for what that animation should do at the toggle points. 

 

To solve it, you could basically kill the scrub in a sneaky way by assigning an id to that problematic ScrollTrigger and then adding this to a one of the ScrollTriggers further down: 

onEnter: () => gsap.killTweensOf(ScrollTrigger.getById("stress").animation)

Fork: 

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

 

Better?

 

Minor notes:

• one of your set() calls was targeting #illu-workday (it's missing the "s" on the end)
• I noticed you had appended a numeric parameter at the end of some gsap.to() calls (as if they were position parameters in a timeline), but that's not technically valid. Like gsap.to("#id", {x:100}, 0).  Not a big deal. 

 

 

[Schweinedog]

Oh wow thanks for taking the time to check my code and replying so fast!

Your suggestions and solution make a lot of sense, to remove the scrub delay or to kill the delayed tween solves it!

I have also restructured my code a bit already and will spend some time in between this and the next project to learn a bit more about creating more efficient gsap animation code. Keep up the great work and thanks again for the great support!