Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Edify Technologies

Can't kill, pause or check isActive when tweenFromTo

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. 

 

https://codepen.io/sallf/pen/XWWgJgJ

 

  • Like 1

Share this post


Link to post
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

Share this post


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

 

 

 

 

Share this post


Link to post
Share on other sites

Oops, I forgot to include the link. I added it above where it should have been.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Still a little confused by your question though. kill doesn't destroy the animation. It just stops it and frees it up for garbage collection. As long as you have a reference to the animation, it doesn't go away, so you can play it after killing it.

  • Like 1

Share this post


Link to post
Share on other sites

Maybe more details about that should be included in the docs while you're going through it, Jack :) 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@ZachSaucier I just noticed your handling of the kill button by first assigning the tween to a  variable tween = tl.tweenFromTo('start', 'end') and then killing it with tween.kill()... which is probably generally a better solution than my killAll() and trying exclude the timeline.

 

Thanks for the quick replies! 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
1 hour ago, OSUblake said:

I like @Rodrigo description of how kill works. 

3edawg.jpg

  • Haha 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×