Jump to content
Search Community

Added .call is not executed on reverse

PencilBox test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I noticed that if a .call added to the end of the timeline, it's not being executed on reverse.

 

In this codepen, , I expect the number in the red box to increase with every button click. However, it increases only on forward animation and stays the same on reverse.

 

If the duration of the first tween (.to) is increased to 0.21,

See the Pen ZYbrMa by anon (@anon) on CodePen

, the number is updated correctly.

 

Also, here

See the Pen wBKyQW by anon (@anon) on CodePen

, when the .call is added to the beginning, the number is moslty increased correctly, but sometimes it looks like the function fails to execute and the number is not increased. This only happens on forward animation.

 

Is there a way to realibly add a .call to beginning/end of the timeline and be sure it will get executed?

 

Thank you.

See the Pen XJmZzV by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Thanks for the demos.

Just so you know we made a very deliberate decision to make sure that .call() functions would only fire when the playhead arrives at the call()'s time. Not when the playhead leaves. So if you have a callback at the end of the timeline and you play forward from the beginning, it will execute when the playhead reaches the end of the timeline. 
If you then reverse() the timeline, the call() will not fire again. This is all by design. 

 

At one point in time the API did behave the way you are expecting it to, but more users found that behavior awkward or it gave un-wanted results.

 

Basically we had people say, "hey, callbacks should only fire when I reach them, not when I leave them".

 

Frankly, I see both sides, but we had to make a decision based on what we thought was most reasonable for most use cases. We went with the logic that a call() placed at the end of the timeline should only fire when the playhead reaches that point in time, not when it leaves it.

 

The solution to the problem is just what you stumbled into in your first post. Place the callback very very very close to the end of the animation. This way the playhead will pass through it when the animation finishes and when it reverses back to the beginning.

 

http://codepen.io/GreenSock/pen/JoYLjz

  • Like 3
Link to comment
Share on other sites

My friend , where you call tl.reverse() , you can put your another functions . actually you dont need onReverseStart .

 

Yes, aplologies for mentioning onReverseStart, forget I did this :) I was just curious why adding .call to the end of the timeline doesn't work on reverse? Is this a bug or by design?

Link to comment
Share on other sites

Yep, and just to add to Carl's excellent explanation, imagine what would happen if the timeline had a yoyo applied - the behavior you described would cause the callback to get triggered TWICE in quick succession on each yoyo (when the playhead hits the end (arrives) and then starts moving back (leaves)). See what I mean? I think pretty much everybody would say that's undesirable. 

 

So yes, this is 100% by design :)

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.
×
×
  • Create New...