Jump to content

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

Reverse timelinelite. Appendded callbacks not working

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'm working on a slide show application in javascript and got all things separated on different files but more or less this is what i'm doing:


var tl = new TimelineLite();

tl.insert(TweenLite.to($('.container'), 0.5, {css:{marginLeft:'-=100px'}, ease:Power2.easeOut, delay:0.2}));

tl.insert(TweenLite.to($('.container'), 0.5, {css:{autoAlpha:1}, delay:0.7}));


Afterwards I reverse the timeline and add a callback to the end of the reversed timeline with call()




The animation plays reversed but the someFunction function never gets executed?


Am i doing something wrong

Thanks in advance

Link to comment
Share on other sites

That sounds like expected behavior. Remember, by default call() will append that function call to the END of the timeline. In your case, you created a TimelineLite that is exactly 1.2 seconds long, so that callback would happen when the virtual playhead arrives at the 1.2-second spot on the timeline but since you're ALREADY at that spot when you add the callback and then you reverse(), the virtual playhead doesn't "arrive" at that spot (it's already there). Since you reverse(), the virtual playhead starts moving back towards the beginning (time:0). If you play() later, that would cause the playhead to go back towards the end of the timeline (playing forward) and eventually hit that callback.


Does that make more sense now?


Were you trying to add a callback that will be called when the virtual playhead arrives at the BEGINNING of the timeline? If so, you can either define an onReverseComplete on the TimelineLite itself when you create it like:


var tl = new TimelineLite({onReverseComplete:someFunction});


Or you could add it after you created the timeline like this:


tl.eventCallback("onReverseComplete", someFunction);


Or you could position it using the call() method's extra parameters:


tl.call(someFunction, null, null, 0, 0);

Link to comment
Share on other sites



Thanks a lot!

tl.eventCallback("onReverseComplete", someFunction, paramsArray, functionScope);

worked like a charm! :mrgreen:


Nevertheless I tried this before

tl.call(someFunction, paramsArray, functionScope, 0, 0);


And it didn't


Uncaught TypeError: Cannot read property '_time' of null TimelineLite.min.js:14
d.insert TimelineLite.min.js:14
d.call TimelineLite.min.js:14
ANIMATIONS.appendCallBack Animations.js:131
STMACHINE.stopAtEnd.reversePlay StopAtEnd.js:55
STMACHINE.SliderStateMachine.doReversePlay SliderStateMachine.js:38
STMACHINE.stopAtEnd.slide StopAtEnd.js:71
STMACHINE.SliderStateMachine.doSlide SliderStateMachine.js:45
SLIDES.gotoSlide slides.js:137
SLIDES.on_Click slides.js:23
f.event.dispatch jquery-1.7.2.min.js:3
f.event.add.h.handle.i jquery-1.7.2.min.js:3


Just in case it'd be because a bug


Anyway thanks again for the quick response

Link to comment
Share on other sites

Thanks for letting me know about the error notification - that should be resolved in the latest version. Glad you got things working with eventCallback().

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.