Callback when there are no pending animations

[santi]

Hi, I wondered if there was a way to get notified when the root timeline gets idle, like, when there are no pending animations at all on the greensock engine. 

 

In our app, we need to highlight some elements for which we use a box shadow, but we would want to disable that effect when there's any kind of animation. It would be great if we could be notified when greensock gets some new animations and when it goes back to an idle state.

 

Ideas?

 

Thanks!

[Rodrigo]

Hi,

 

The only thing I can think of is checking the timeline's _active status. That , as you might have guessed, tells you whether or not a timeline instance is active, by returning a boolean value.

 

You mentioned a root timeline, so consider that this works different  with an exportRoot timeline than a traditional timeline, for example the following code:

var div1 = $("div#div1"),
    btn1 = $("button#btn1"),
    btn2 = $("button#btn2"),
    btn3 = $("button#btn3"),
    btn4 = $("button#btn4"),
    tl1 = new TimelineMax({paused:true, repeat:1, yoyo:true}),
    tl2;

tl1.to(div1, 3, {x:300, y:200});

btn1.click(function()
{
	tl1.play(0);
});

btn2.click(function()
{
	tl2 = TimelineLite.exportRoot();
});

btn3.click(function()
{
	console.log(tl1._active);
});

btn4.click(function()
{
	console.log(tl2._active);
});

When you check tl1 just when the page is loaded you get false, if you check tl2 you get an error (tl2 is still undefined ). Then if you export the root, but don't play tl1 and you check you'll get tl1 = false and tl2 = true (maybe Jack or Carl could explain that). Then if you play tl1 and check while it's playing you'll get true and true, and after the yoyo - repeat when all is done you'll get false and false. The point is that when you do the export root and the timeline hasn't played since being exported (it may have played before being exported) and check you'll get true even if the timeline is idle.

 

And I'm going to leave it here because there's a huge electric storm here in the andes and i'll get a blackout any time.

 

Hope it helps,

Cheers,

Rodrigo.

[GreenSock]

Currently GSAP doesn't support idle notification like that. You could certainly structure your animation code to give you that data, though. For example, create your own TimelineLite with its autoRemoveChildren set to true and an onComplete, and use that TimelineLite for all your animations. That way, when the onComplete is called, you know your stuff is done. One other hacky solution would be to set up your own setTimeout() or requestAnimationFrame that checks the TweenLite.ticker.frame and when it stops iterating, you know the engine has gone idle. 

[santi]

Thanks for the replies!

 

I guess I'll try to keep track of my current timelines and use onComplete/onRevertCompleted as both suggested.

 

I thought about checking for active, but I would want to avoid that if possible.