Equivalent to onReverseComplete for Animation Start?

[MarcoCuel]

Hey folks!
I've been checking out the GSAP documentation and got a question.
Do you know if there's an equivalent to .onReverseComplete(), but for the start of the animation? Like, when the animation kicks off but in reverse mode?

If anyone knows anything about this or has any ideas on how to make it work, I'd really appreciate the help!

Thanks!

[mvaneijgen]

Hi @MarcoCuel welcome to the forum!

 

Do you maybe have a minimal demo demonstrating the issue you're trying to solve? This feels like the classic X Y problem https://xyproblem.info, you've thought of a solution to fix your problem, but you have not explained us what the issue is you're trying to solve. 

 

There is reversed https://gsap.com/docs/v3/GSAP/Timeline/reversed()/, but I love to know what the issue is so we can help find a solution. 

[Rodrigo]

Hi,

 

There is no onReverseStart callback in the API for the simple reason that in 100% of the cases reversing a Tween/Timeline basically happens on an event handler, that means you can use the same event handler to trigger another callback you need/want to execute at that moment.

 

const tl = gsap.timeline();

const myReverseStartCallback = () => {
  // Do something here when the timeline starts reversing
};

const myEventHandler = () => {
  tl.reverse();
  myReverseStartCallback();
};

 

Hopefully this clear things up.

Happy Tweening!

[akapowl]

1 hour ago, Rodrigo said:

There is no onReverseStart callback in the API for the simple reason that in 100% of the cases reversing a Tween/Timeline basically happens on an event handler

While I definitely agree that a lot of times that might be true - probably even most of the time - I certainly wouldn't agree with 100%.

There definitely are usecases where an onReverse can be handy in cases outside of events.

That's why there also is a work-flow example in the helper-functions section of the docs that explains how to create your own custom onReverse() callback functionality, @MarcoCuel.

https://gsap.com/docs/v3/HelperFunctions/

https://gsap.com/docs/v3/HelperFunctions/helpers/trackDirection/

It comes with caveats though - e.g. logically it will take one tick to update the direction as is explained in the orange 'caution' box over there - thus you might have to accomodate your own logic to that fact if you want to trigger things onReverse appropriately then.

Some of the reasons that it is not included in GSAP's core are, that having it external like that keeps the core lightweight and doesn't require extra processing on the vast majority of animations that don't need this functionality.

That last part comes directly from Jack (@GreenSock). If you have more questions, I'm sure he'll be able to answer them.
 

[MarcoCuel]

8 hours ago, mvaneijgen said:

Hi @MarcoCuel welcome to the forum!

 

Do you maybe have a minimal demo demonstrating the issue you're trying to solve? This feels like the classic X Y problem https://xyproblem.info, you've thought of a solution to fix your problem, but you have not explained us what the issue is you're trying to solve. 

 

There is reversed https://gsap.com/docs/v3/GSAP/Timeline/reversed()/, but I love to know what the issue is so we can help find a solution. 

Here is a demonstration of what I'm trying to do

See the Pen bGZKVNq by MarcoCuel (@MarcoCuel) on CodePen

[akapowl]

Looks like Mitchel was right 👍- for that you really wouldn't need an onReverse callback.

Here's just two ways you could handle something like that - and there's probably a couple others beyond those.

I hope these will be helpful already, though:
 

1. Depending on the index of the dot (to make sure neither the first nor the last will get toggled at the end in any direction), you could .add() functions before and after each of your tweens to toggle the class .
   
   https://gsap.com/docs/v3/GSAP/Timeline/add()/
   
   

   See the Pen yLwxXgX by akapowl (@akapowl) on CodePen

   
    
2. Or (even better) with similar logic with regard to the index, have things handle via GSAP altogether with .set() calls; unless you really need that active class, like maybe for something else outside of the pure styling.
   
   https://gsap.com/docs/v3/GSAP/Timeline/set()
   
   

   See the Pen yLwxXMX by akapowl (@akapowl) on CodePen

 

Some hints with regard to syntax:
 

// Instead of this:  

tl.to(dot, {
  rotate: "180deg"
})

// You could just do this:

tl.to(dot, {
  rotation: 180
})

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS

Also there is no such ease as 'linear' - if you want linear interpolation, ease: 'none' is what your looking for.

If I am not mistaken, any invalid ease like that would fall back to the default ease of 'power1.out'.

Edit:

It looks like 'linear' seems to be accepted though, and will result in no easing 🤔
And apparently that is the case since like forever in GSAP3 ...didn't even know that 😅

https://gsap.com/docs/v3/Eases/
 

[mvaneijgen]

I have to say, what a fun animation! Great work and awesome solution @akapowl!