TimeLineMax callbacks not called

[eco_bach 0 Likes (Newbie)]

I have a TimeLineMax sequence defined thus

var tl=new TimelineMax({paused: true});

tl.append(TweenMax.to(f, _flipSpeed, {rotationY: 90 + _offset, visible: false, onComplete:doneRotateF,ease:Linear.easeNone}))

tl.append(TweenMax.to(b, 0, {alpha: 1, immediateRender: false}))

tl.append(TweenMax.to(b, _flipSpeed, {rotationY: 0, onComplete:doneRotateB, ease:Linear.easeNone}));

When I call it using

tl.tweenTo(_tl.duration());

the callbacks work, are called, but when I try to reverse it

tl.tweenTo(0);

the tweens work fine but the callbacks are NOT called. What gives?

[jamiejefferson 1,196 Likes (Superhero)]

onComplete is not quite the same as inserting a callback after the end of a tween - it only fires when the tween completes, reaching its duration when playing forward. There is also an onReverseComplete for playing in reverse, but that is called when the reverse completes i.e. when the tweens time reaches 0. Be aware that .tweenTo() only tweens time and doesn't change the timelines reversed property, so even if you tween to a time in the past, it won't be technically reversed unless you set it.

 

In this situation, you might be better off adding the callback into the timeline itself, so it will be called in either direction.

var tl = new TimelineMax({paused: true});

tl.to(f, _flipSpeed, {rotationY: 90 + _offset, visible: false, ease:Linear.easeNone});

tl.call(doneRotateF); // "onComplete"

tl.set(b, {alpha: 1}); // timeline.set doesn't require immediateRender:false

tl.to(b, _flipSpeed, {rotationY: 0, ease:Linear.easeNone});

tl.call(doneRotateB); // "onComplete"

Also, if you're using GSAP v12, the append() function is deprecated in favour of the add() function, but you can also create your tweens directly on the timeline, which drastically improves the readability of your timeline code.