Jump to content

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

How to prevent ScrollTrigger from scrubbing animation backwards

Go to solution Solved by OSUblake,

Recommended Posts

I am looking to use ScrollTrigger with the scrub option to control a GSAP timeline, but only updating the progress of the timeline/tweens when going forward in a position that has to be progressed.


I did take a look at this post that says to use the onUpdate callback event to update the progress, but for some reason it's not working with how I set up the animation. When I scroll down half way through the animation and start scrolling back up, the progress reverses.


From the codepen, I added gsap data-attribute options at the timeline and tween levels (timeline for the component, tween for the individual elements within the component so that I can provide different options, such as "position" to create the stagger effect). I've added the callback within the GSAP Timeline.scrollTrigger object.

See the Pen rNzxOdz by bensewards (@bensewards) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @bewards


You would need to create a stand alone ScrollTrigger and control the progress like kind of like this.


See the Pen porgyLX by GreenSock (@GreenSock) on CodePen


  • Like 1
Link to comment
Share on other sites

Thanks @OSUblake - exactly what I was looking for. I added a data-attribute to disable backwards scrubbing so now I can switch between the options. A lot to learn!

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.