Jump to content
GreenSock

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

ScrollTrigger with scrub, trigger reverse timeline

Recommended Posts

Hi

 

Is it possible to trigger a timeline to "run" in reverse using ScrollTrigger with scrub? For just playing timeline in reverse I can use timeline.reverse(), but that doesn't seem to work when using ScrollTrigger with scrub. Right now I have two timelines, one forward and one reverse? See pen.

Or is it possible to have ScrollTrigger  (w/scrub) limited to a specific section of a timeline, say between 2 and 4 seconds?

 

Kristoffer

See the Pen LYGzEpj by krispen (@krispen) on CodePen

Link to comment
Share on other sites

Hey @kristoffer,

 

If you want a break between forward and reverse, I would scrub a timeline like this.
Alternatively, tween the progress.

 

See the Pen oNbGXoR?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hi Mikel,

Thanks for your reply. That could work, so in your case the pause will be 20% ( 0.5/(1+0.5+1) ) of the scroll. But I would have to create two tweens, one fwd and one reverse, no easy shortcut as .play() and .reverse()?

Tween a progress...  would it be something like this: gsap.fromTo(timeline, {progress: 25%}, {progress: 75%}); ? Does that mean I can tween the time itself too: gsap.fromTo(timeline, {time: 2}, {time: 4}); ? Can this be reversed as well:  gsap.fromTo(timeline, {time: 4}, {time: 2}); ?

 

Thanks,

Kristoffer

 

 

Link to comment
Share on other sites

Figured it was easier to just use two gsap.to() with scrolltrigger, one fwd and one reverse. But it doesn't work correctly: fwd from x = 0 to x = 50vw works, but reverse instantly jumps back to x = 0. Am I doing something wrong? or could it be a bug maybe...  ?? 

 

See the Pen abdLdzB by krispen (@krispen) on CodePen

Link to comment
Share on other sites

Yep, that's because by default the ScrollTrigger will force its animation to render initially (for a bunch of reasons - I can explain if you want). When an animation renders for the first time, it records the starting/ending values internally so that it can very quickly interpolate during the tween. In this demo, at the time you create your ScrollTrigger, ball.x is 0, thus when it renders it says "the start is 0...and we're tweening to 0" (hence the jump to 0). 

 

There are a few solutions to choose from: 

  1. Set immediateRender: false on the tween. 
  2. -OR- Use a fromTo() instead of a to() so that you define both the starting and ending values. 

Does that help? 

 

There are a bunch of other ways you could approach this, but I don't want to overwhelm you :)

  • Like 2
Link to comment
Share on other sites

Hi

 

Ok that make sense. I kinda suspected that after I had the same issue when trying to use ScrollTrigger video scroll-animation. It always jumped back to zero even though currentTime > 0. .fromTo fixed that issue.  What is the best method for this issue in terms of animation performance and even browser support (if any difference)?

 

Link to comment
Share on other sites

19 minutes ago, kristoffer said:

What is the best method for this issue in terms of animation performance and even browser support (if any difference)?

They're practically equivalent. Do the method that makes more sense to you :) 

  • Like 1
Link to comment
Share on other sites

Ok, .fromTo it will be then. Thanks for the help!

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