Reverting timeline animation immediatly

[nate.ben]

Hello Gsap community ! this might be obvious but i tried many ways to achieve and it ain't coming easy for a first-timer

 

In the demo below find the animation needed for a menu - but - the reverse function is invoke in delay which I would like it to be immediate, so the experience of transformX (zero to X) would be even on the way back.

 

Demo:

https://codesandbox.io/p/sandbox/box-scrolling-animation-2-m4c2fl?file=%2Fsrc%2Fstyles.css%3A21%2C22

 

This might be easy one for experienced players

I would appreciate the help !

 

Nate

[mvaneijgen]

Hi @nate.ben welcome to the forum!

 

React was fighting me, so I moved to Codepen.  The simplest solution is to have ScrollTrigger control a timeline and in the timeline have the in and out animations directly. 

 

See the Pen RwORdVw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

The scrub property makes it so you give control of the animation to the scrollbar of the user. If you in this case want nothing you happen on scroll up (see issue in below pen). You probably need to roll your own scrub logic, which you can do in the onUpdate for and then check which way it is scrolling and then update the progress of an external animation. This seems simple, but if you start building it you'll probably see you need more an more logic to make it work. I would go the first route, definitely when you're just starting out using the tools.

 

What you can do is change the durations of the two tweens and make the duration of the first tween twice (or even three times) longer than the second tween. Hope it helps and happy tweening! 

 

See the Pen OJGXqzR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[nate.ben]

Hello @mvaneijgen and thanks for the welcoming
Your solution is exactly what i was looking for, so thank you !

One thing im not getting clear is that the order of the timeline functions seems inverted (?) it's starting from x=100 to x=0 ? what's the logic behind it ?

 

 

tl.to(sectionRef.current, {

  x: 100,

});

 

tl.to(sectionRef.current, {

  x: 0,

});

[mvaneijgen]

I'm not sure what you mean. Are you talking about the first one? That one is probably already half way through the progress of the of it's start and end markers, so that one is already at 100, but that is only for the first one right? 

 

You could use a clamp() around your start triggers to make it only play fully no matter what screen size. Otherwise could you be more specific what the blocks are doing now and what you want them to happen? 

 

 

[nate.ben]

OK yes, using Clamp is making it great

I want to enhance this experience and set the scroller to snap to each of the boxes while scrolling - would it be possible and how to achieve that ?

[mvaneijgen]

This is totally not to be mean, but check the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ I know it sounds really boring, but just read the page once and you’ll be surprised how much knowledge is in there that you didn’t even know you needed. 
 

If you after reading it still need help just post back here with what you’ve tried and we’ll be happy to help you out