Jump to content
Search Community

Can't kill, pause or check isActive when tweenFromTo

Edify Technologies test
Moderator Tag

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'm experiencing an issue where I can't kill() a timeline that was started with tweenFromTo. I also don't seem to be able to pause() or check isActive(). Expected result is that clicking the Kill button in mid animation, would ... well, kill the animation. Any thoughts?

 

Note, in the CodePen, if you remove { paused: true } so that the animation runs on load, the Kill button and Indicator light both work as expected. 

 

 

See the Pen XWWgJgJ by sallf (@sallf) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello and welcome to the GreenSock forums. Thanks for being a Business Green member. We couldn't do what we do without people like you!

 

As the docs say, tweenFromTo returns a tween instance. So really what's happening is your timeline isn't playing, the tween of the timeline's progress is playing. Does that make sense? So when you're trying to pause it, the timeline is still "paused". You should pause the tween that is created instead.

 

When it comes to killing it, it's a bit more unclear to me. @GreenSock or others, when I click "Kill tl" in the demo below I would expect it to not only stop the visible animation, but also completely remove the timeline. However when I click "Play tl" after "Kill tl" it jumps to the state that it would have been at had I not "killed" it. Why is that?

 

See the Pen ExxXjEo by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

13 minutes ago, ZachSaucier said:

When it comes to killing it, it's a bit more unclear to me. @GreenSock or others, when I click "Kill tl" in the demo below I would expect it to not only stop the visible animation, but also completely remove the timeline. However when I click "Play tl" after "Kill tl" it jumps to the state that it would have been at had I not "killed" it. Why is that?

 

How did you have it set up?

See the Pen e7a4218718c04c652ceba8e3bb038fbc by osublake (@osublake) on CodePen

 

I like @Rodrigo description of how kill works. 

 

 

 

 

Link to comment
Share on other sites

23 minutes ago, ZachSaucier said:

when I click "Kill tl" in the demo below I would expect it to not only stop the visible animation, but also completely remove the timeline. However when I click "Play tl" after "Kill tl" it jumps to the state that it would have been at had I not "killed" it. Why is that?

Yep, it's more like a polite kill :) For example, when a tween completes, it checks its parent timeline (typically the root) and if it has autoRemoveChildren, it dumps it from the timeline and obviously doesn't continue playing it. That's basically what kill() does. But someone might later want to resurrect that animation by calling restart() or something, so it keeps a record internally of its old parent timeline so that it can add itself again if necessary. Again, this is all to make things as flexible as possible. Calling kill() doesn't actually force it to do all the work of scrubbing out all the properties and forgetting everything. That'd be pretty wasteful.

  • Like 2
Link to comment
Share on other sites

30 minutes ago, ZachSaucier said:

As the docs say, tweenFromTo returns a tween instance. So really what's happening is your timeline isn't playing, the tween of the timeline's progress is playing. Does that make sense? So when you're trying to pause it, the timeline is still "paused". You should pause the tween that is created instead.

 

Thanks for the replies. That makes sense how you described it. Basically with tweenFromTo, a Tween is spun off of the Timeline. Based on that description, I would expect TweenMax.killAll() to solve my problem...and it does!

 

Though, another unexpected behavior is after killing the tween with TweenMax.killAll(false, true, true, false) (the last false is for timelines) I would expect to be able to run tweenFromTo again by clicking the Start button. 

 

+1 vote for renaming kill() to politelySayNo() and killAll() to nuke()   ?

 

See the Pen OJJgypR by sallf (@sallf) on CodePen

 

 

  • Haha 2
Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

We're Americans here ;) 

 

Canadians, eh.
https://softwareengineering.stackexchange.com/a/5576/292963

 

11 minutes ago, Edify Technologies said:

Though, another unexpected behavior is after killing the tween with TweenMax.killAll(false, true, true, false) (the last false is for timelines) I would expect to be able to run tweenFromTo again by clicking the Start button.

 

That removes tweens from their timelines. It's better to be explicit about what you want to kill.

  • Like 2
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...