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. 

https://codepen.io/GreenSock/pen/1e948aac14aa38327a74d76c8677f024

 

 

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

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.