ScrollTrigger with scrub, trigger reverse timeline

[kristoffer 7 Likes (Newbie)]

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

[mikel 4,742 Likes (Superhero)]

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

[kristoffer 7 Likes (Newbie)]

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

 

 

[kristoffer 7 Likes (Newbie)]

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

[GreenSock 16,307 Likes (Superhero)]

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

[kristoffer 7 Likes (Newbie)]

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)?

 

[ZachSaucier 7,048 Likes (Superhero)]

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  

[kristoffer 7 Likes (Newbie)]

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