Mitigate ScrollTrigger/Tween Clashes

[Steve Giorgi 8 Likes (Newbie)]

In general, what do GSAP users have in their arsenal to mitigate animations overlapping when users are triggering multiple non-scrubbed ScrollTriggers and/or tweens while scrolling/moving through a site at various speeds.   These are what we've come across:

 

• Ensure timelines/tweens do not clash (not always simple) --- however, if you're scrolling through several ScrollTriggers, even if you have a delay or long duration between ScrollTriggers, they can clash if the user scrolls too quickly.  I don't think this is the case but it appears that tweens/and callbacks can be skipped if the user scrolls too quickly; we've tested this with .set() and .call().

 

• Add OnEnter/OnLeave logic to check if another timeline is "tweening" and then kill the offending timeline gracefully.  I'm not seeing any examples of this between multiple ScrollTriggers, but the logic is fairly straightforward although can be extremely convoluted.

 

• Set overwrite on your tweens/timelines.  I don't think this applies to separate ScrollTriggers --- I've tried multiple ways and haven't seen any affect between ScrollTriggered timelines that clash.  I guess how could it; they are separate timelines?

 

• Set overflow hidden on the scrolling container so that the user cannot scroll when a tween is occurring; use very sparingly and only in critical areas; best used with a custom scrollbar to remove visual anomalies.

 

Are there any other ways to mitigate clashes between ScrollTriggers and tweens if a user scrolls/moves too quickly through a site?  It's not only too quickly in one direction, but when they reserve direction is when we probably see the most clashing.  Is there a default overwrite setting that will have an effect between ScrollTriggered timelines?  Does the overwrite already do this and we're just not seeing it/using it correctly?

 

Kind Regards,

Nitro Interactive

[GreenSock 18,876 Likes (Superhero)]

It'd definitely help to see a minimal demo so we can make sure we're addressing the real issue adequately, but here are some thoughts:

 

If you've built a page in a way that requires that one ScrollTrigger-based animation finishes before another one starts (thus it looks weird if the user scrolls fast and they're both playing), you can force the previous one to completion with a callback: 

let anim1 = gsap.to(... {
  scrollTrigger: {
    onEnterBack: () => anim2.progress(0)
  }
});
let anim2 = gsap.to(... {
  scrollTrigger: {
    onEnter: () => anim1.progress(1),
    onEnterBack: () => anim3.progress(0)
  }
});
let anim3 = gsap.to(... {
  scrollTrigger: {
    onEnter: () => anim2.progress(1)
  }
});

Overwriting

Keep in mind that overwrite logic runs once:

• overwrite: true - immediately when the tween is created
• overwrite: "auto" when the tween renders for the first time

And when overwriting occurs, it is permanent. So this is not ideal for what you're talking about because you don't actually want to kill...as in dead...permanently. You're just wanting the animation to finish right away, correct? That's why I suggested the code above. 

 

For the record, the reason overwriting occurs once (not every time the animation plays) is for performance reasons and because it's almost never helpful to run more than the first time. We're VERY performance-minded. 

 

If you're still struggling, please provide a minimal demo and we'd be happy to take a peek. 

[Steve Giorgi 8 Likes (Newbie)]

@GreenSock starting/stopping the tweens like this is incredibly helpful.  Could I apply this same logic to timelines?  Each of our ScrollTriggers is associated with a timeline which consists of a larger number of tweens.  I'm creating a minimal demo in Codesandbox; it's a bit of a challenge to reduce down.

[GreenSock 18,876 Likes (Superhero)]

4 hours ago, Steve Giorgi said:

Could I apply this same logic to timelines?

Absolutely. Same exactly logic. Timelines have the same control functions as tweens. They all extend a common Animation class, so yes it's simple to do.