Jump to content
iconofsyn

Stopping an animation

Recommended Posts

I have an interactive web app in which an object can have multiple "states" and there are buttons to switch state
greensock is being used to animate the change from the current state to the selected state.
any of the states can be directly accessed while the object is in any state.

The .to() method is fine for this.

However it is possible that a user will select a different state while an animation to change the state is in progress.

i have 3 qustions
if i use the .kill() command to stop an animation in progress will this halt or reverse the existing animation?
if it halts it will the next animation start from the position it reached when the .kill() command was called?

if in my code i call the kill() command an immidiatly start a new tween will there be any noticeable pause in the animation?
 

Share this post


Link to post
Share on other sites

if i use the .kill() command to stop an animation in progress will this halt or reverse the existing animation?

When an animation gets killed it will stop playing immediately. It will not be reversed.

 

if it halts it will the next animation start from the position it reached when the .kill() command was called?

Yes, creating a new animation on that element will use the existing values as the start values in the new animations

 

if in my code i call the kill() command an immediately start a new tween will there be any noticeable pause in the animation?

There should be no noticeable pause or delay unless you are killing and creating thousands of tweens at once.

 

Here is a simple example. After 2 seconds a new animation will move the green box in the opposite direction and make it spin. 

See the Pen 1e948aac14aa38327a74d76c8677f024 by GreenSock (@GreenSock) on CodePen

 

 

Notice there was no need to kill(). GSAP has an overwrite mechanism in place that automatically kills tweens of conflicting properties when new tweens are created.

 

If you have further questions, please let us know. It is helpful to provide a reduced demo (as shown above) so that we can more clearly understand the issues. 

 

Thanks

 

 

 

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