Jump to content
Search Community

Mitigate ScrollTrigger/Tween Clashes

Steve Giorgi test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...