Jump to content
GreenSock

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

isActive not working in custom scene manager

Go to solution Solved by Carl,

Recommended Posts

I've created a scene manager that wraps Greensock, with the intent of being able to step through animations one "step" at a time, kind of like a slideshow, except the steps are animated - each step is constructed from a child timeline.

 

There are a few issues with it, but the one I am currently struggling with is that mainTimeline.isActive always returns false, even when the animation is clearly moving.

 

 

Is this because mainTimeline is considered paused somehow even when it's child timelines are tweening? That doesn't seem right, since I'm trigging a play with mainTimeline.tweenFromTo - but I'm not sure what else it could be.

 

Any help on how to detect whether the animation is currently playing would be appreciated. You'll see in the codepen I also tried a different approach, creating a variable called inMiddleOfStep and toggling it in onStart/onComplete callbacks, but this does not always work - sometimes the onComplete callbacks don't fire until the beginning of the next 'step.'

 

Thanks!

See the Pen pvQQPN by nbieber (@nbieber) on CodePen

Link to post
Share on other sites

Yup, an animation is not active when it is paused. 

Think of your timeline like a record player that is sitting in its off state.

The record player will only play if someone turns its dial to "on". 

However, even while the record player is off some kid could come in the room and start spinning the record with his hand and you would hear music.

Is the record player playing? No.

The same logic applies to isActive() and tweenTo(). tweenTo() is an external force that drives the playhead of your timeline, it does not affect the paused or reversed states. 

 

But just like with the record player, we could tell the kid to stop spinning the record and we could even ask "Hey kid! Are you spinning that record?"

And the good news is with GSAP we can also ask the tween that is created from the tweenTo() if it isActive()!

 

 

A very important piece of information from the tweenTo() docs:

 

Remember, this method simply creates a TweenLite instance that pauses the timeline and then tweens the time() of the timeline. So you can store a reference to that tween if you want, and you can kill() it anytime. 

 

So all you need to do is store a reference to the tween that is created from the tweenTo() and see if it isActive(), instead of the timeline

 

 

Here is a reduced test case:

var tl = new TimelineMax({paused:true});
var $isActive = $("#isActive");
var tween = tl.tweenTo(1); //the tween that drives tl

TweenLite.ticker.addEventListener("tick", onTick);

//constantly check the isActive() state of the tween that is created by tweenTo()
function onTick()
{
    $isActive.text(tween.isActive())
}

//simple timeline
tl.to("#redBox", 0.5, {x:150})
  .to("#redBox", 0.5, {x:300})

// Button event handlers

$("#section1").on("click", function() {
  tween = tl.tweenTo(0)
});


$("#section2").on("click", function() {
  tween = tl.tweenTo(0.5)
});


$("#section3").on("click", function() {
  tween = tl.tweenTo(1)
});

http://codepen.io/GreenSock/pen/MYzZwG?editors=001

 

Notice that the tl timeline is paused and all animation happens using tweenTo().

  • Like 3
Link to post
Share on other sites

Wow! That's an excellent analogy.

  • Like 1
Link to post
Share on other sites

Thanks, Blake. Glad to know it made sense. 

Jack has used the record player analogy to get concepts through my thick skull plenty of times;)

  • Like 1
Link to post
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.

×