Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
David Aragon

unUpdate on animation

Recommended Posts

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

Link to post
Share on other sites

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. 

  • Like 4
Link to post
Share on other sites

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

 

  • Like 4
Link to post
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.

×