Jump to content
Search Community

ScrollTrigger - fast scroll issue

Nysh test
Moderator Tag

Recommended Posts

Hey guys, 

I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. 
 

If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue.  :P  Hope that all made sense.

I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated.
Cheers :) 
 

See the Pen MWmzZdZ by Nysh (@Nysh) on CodePen

Link to comment
Share on other sites

You've got conflicting animations, so you're probably going to need to rethink this. You could probably create standalone scroll triggers, and use callbacks for the animation.

 

ScrollTrigger.create({
  trigger: ".item-1",
  markers: true,
  start: "top top",
  onToggle({ isActive }) {
    // do your animation
  }
});

ScrollTrigger.create({
  trigger: ".item-2",
  markers: true,
  start: "top top",
  onToggle({ isActive }) {
    // do your animation
  }
});

 

  • Like 2
Link to comment
Share on other sites

Another option: use an onToggle that checks the velocity and if it's adequately fast, it just forces the animation to its end with a reusable helper function like this: 

function finishOnFastLeave(self) {
  !self.isActive && Math.abs(self.getVelocity()) > 2500 && self.animation.progress(self.progress === 1 ? 1 : 0).pause();
}

Usage:

onToggle: finishOnFastLeave

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

 

5 hours ago, Cassie said:

I would have thought overwrite true would have worked here too.

No, overwrite logic runs ONCE for a tween (for performance reasons):

  • overwrite: true - runs immediately when the animation is created - it finds all other tweens of the same target(s) and kills them in their entirety. 
  • overwrite: "auto" - runs the first time the tween renders; it isolates and kills only the conflicting individual properties in other tweens that are active at that moment. If you invalidate() a tween, then the first time it renders after that, it'll re-run the overwrite: "auto" routine at that point too. 

Here's another thread where we discussed several options for handling fast scrolling and overlapping scroll-driven animations (skip to the final few pots): 

 

  • Like 3
Link to comment
Share on other sites

Hey fam thanks so much for all the replies.😍 This forum is truly awesome! 


I gave it another shot with a slightly different approach. I specified the end, and made the start and end triggers the same, for both timelines. 
I think this ensures there's no conflict between the first and second tween?
 

start: "top center",
end: "top center",

 

It seems to be working so far / fixed the issue of overlap. Here's an updated codepen :)

See the Pen mdmvVxy by Nysh (@Nysh) on CodePen


 

Link to comment
Share on other sites

Hey @Nysh,

 

There's still going to be a conflict between the tweens, you just can't see it as the first tween is playing too fast to notice.

If we slow it down and you scroll down fast it will still be there.

The magic combo in this case will be immediateRender:false and overwrite:'auto' on the second tween.

This will result in the behaviour I think we were both expecting!

ScrollTrigger tweens render immediately so that all the positioning can be precalculated. We want to wait and only run overwrite as the second tween plays, that way any conflicts occurring at that point will be killed.

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



Here's a simplified demo with some console logs to show the start, end and when the tween's interrupted!

See the Pen c298bc17db96f11251efc1740a4d10e4?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

5 hours ago, Cassie said:

The magic combo in this case will be immediateRender:false and overwrite:true on the second tween.

I think perhaps you meant overwrite: "auto" on the second tween. overwrite: true immediately kills all other tweens of the same target (even if there aren't any overlapping properties). The "auto" mode only runs the first time the tween actually renders, and isolates only the individual properties that overlap. 

 

Also keep in mind that once a tween (or a property in a tween) is killed, it's dead. It doesn't come back the next time you run it. 

 

I personally favor the finishOnFastLeave() helper function approach because it avoids killing things so that if the user scrolls back up and goes slowly, things still work the way you intended. 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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