CSS3 animation complete callbacks

[mdavison 1 Likes (Newbie)]

If a step in a timeline sets a class with a transition, is it possible to get a callback when the CSS3 transition has completed rather than immediately after the class is added?

[OSUblake 18,533 Likes (Superhero)]

Yes. But did you know that you can tween to a CSS class?

TweenLite.to(myElement, 1, { className: "+=myClass", onComplete: myCallback });

Or you can do it the hard way and hope the event fires.

myElement.addEventListener("transitionend", myCallback);

[Ihatetomatoes 327 Likes (Leader)]

@mdavison, you can also refer to the Debugging CSS Keyframe Animations article. More specifically the Debugging CSS Animation Events with JavaScript section.

 

And welcome to the GSAP forums

[SLSCoder 7 Likes (Newbie)]

Does this only work for TweenLite or TweenMax?
I'm trying to do it at the end of a sequential animation with TimelineMax and it doesn't work.

t3.to(LogoSystems, 3.5, {"left":nLeft+"px", onComplete: doAnim2});

If I remove the onComplete property it works fine.

 

[OSUblake 18,533 Likes (Superhero)]

That's for a tween. You can add callbacks for a timeline in the constructor.

var tl = new TimelineMax({
  onComplete: doSomething
})

 

[Carl 11,320 Likes (Superhero)]

Yeah, Blake is right, the onComplete of the timeline sounds like what you want, but putting it on the last tween that's in a timeline is valid too.

In these cases it really helps to see a reduced CodePen demo as we can get a better sense of exactly what is going on.

 

 

[SLSCoder 7 Likes (Newbie)]

I tried it on the last timeline and it didn't work. Could'a been a bug I didn't catch.

I tried it Blake's way. Thanks - that worked!