Jump to content
Search Community

isActive not working in custom scene manager

nicolethenerd test
Moderator Tag

Go to solution Solved by Carl,

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

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 comment
Share on other sites

  • Solution

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 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.
×
×
  • Create New...