Jump to content
GreenSock

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

Callback when there are no pending animations

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

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

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.
×