Tweenmax callback being executed before the animat

Question

I am using the greensock gsap for animations on my web site. Problem are the callbacks who are executing before the end of the animation. In the example bellow the elements are being removed somewhere on the half of the animation.

TweenLite.to($(".flipper"), 2, {rotationY:180,onComplete:function(){
    $(this).remove()
}});

Did anyone experienced the same issue?

Answer 1

No, works fine for me (see jsfiddle below). However, this in your callback function is not your animated object, it's the tween. So you have to use this.target instead if you want to remove it after animation, like this:

TweenLite.to($(".flipper"), 1, {rotationY:180,onComplete:function(){
    (this.target).remove()
}});

http://jsfiddle.net/brian_griffin/5Ltfg/

Answer 2

As @hjuster pointed out, a transition declared in CSS can conflict with onComplete callback in TweenMax. I think that the reason why onComplete is invoked in the wrong time

Answer 3

I always recommend using the onUpdateScope, onCompleteScope, etc so you are completely clear on what the scope of this you are doing. The documentation is rather slim on this because it is kinda buried. All onDoSomething functions for greensock have a scope parameter.

TweenLite.to($(".flipper"), 2, {rotationY:180,onCompleteScope: $(".flipper"),
    onComplete:function(){$(this).remove()
}});

Makes it completely clear to the Tween that $(this) = $(".flipper"). This is also extremely helpful for when you are wanting to make changes out of scope to the tween. Depending on where you ran you tween it may not have access to jquery objects outside of it's scope but you can pass in a different scope via the onCompleteScope.