Jump to content
Search Community

How to prevent ScrollTrigger from scrubbing animation backwards

bewards test
Moderator Tag

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

  • 10 months later...
  • 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...