unUpdate on animation

[David Aragon]

I'm trying to use "onUpdate" to trigger a very short animation when a user scrolls.

 

I noticed that my animation is triggered over 10 times every time I scroll, so I used the console and it does log multiple times...

 

I tried to combine with onComplete: kill/clear/pause but it stops the animation and it doesn't start again.

 

Is there a way to trigger the animation just "while" I'm scrolling? I tried a wheel event function to trigger the animation and it didn't work either.

 

 

See the Pen KKgBLae by Nkozi (@Nkozi) on CodePen

[GreenSock]

I'm not sure what you mean by "every time I scroll" - were you under the impression that onUpdate would only be called once between the time you start scrolling and stop? That's not how it works. Try adding this to your codepen: 

window.addEventListener("scroll", () => console.log("scroll"));

You'll see that the browser fires a scroll event at least once every time the screen refreshes as the result of a scroll, so this can happen 60+ times per second. And of course ScrollTrigger updates based on scroll events as well (though it throttles them so they don't happen more often than the screen refreshes because that'd be wasteful). 

 

If your goal is to fire an animation each time the user stops scrolling, you could just do this:

ScrollTrigger.addEventListener("scrollEnd", myFuncTL);

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

 

Or are you literally trying to make an animation play only while the user is actively scrolling? You can do pretty much anything you want using ScrollTrigger - I just don't quite understand the goal here. Perhaps you should look at the "scrub" property. 

[mikel]

Hey @David Aragon,

 

Welcome to the GreenSock Forum.

 

'Trigger the animation just "while" I'm scrolling':  Do you expect this effect?

 

See the Pen GRjXgRL by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[David Aragon]

This is perfect, thank you so much both of you 😍