Jump to content
Search Community

Stopping an animation

Greg Stager test
Moderator Tag

Recommended Posts

OK - I give up. Been struggling with this for the last three hours.

I am by no means a JavaScript expert but I am pleased with the amount of things I am able to do with it.
GSAP tools are poised to really open things up for me but - MAAAN - am I taking it in the shorts.

I like to learn though so I don't necessarily mind the struggle but I am clearly missing something here.

 

I made a really simple animation with a rotating box - (imagine in your mind a box fan in the window).

I created four buttons to set the speed of the rotation high, medium, low, and off.

High, medium, and low work great and my codepen here might lead you to believe that the Off button works too but it is more of a gimmick than a true off.

 

I got it to look like it is off by using fromTo and setting the rotation to zero for both.

What I really want is to get the kill() command to work properly but have been failing all night long.

I have tried tons of variations and none of them seem to work.

I have read the docs on it which generated some thoughts but no success.

I have read several forums with similar questions but many of them simply pointed to the docs on the kill() command - so that didn't get me much further.

I have tried rearranging the code, using a jQuery example I found in one of the forum posts, and setting my animation to a variable so that I could try using  variable.kill(); but that didn't seem to help either.

So here is what I am left with - the pseudoStop.  What in the world am I missing in trying to get the kill command to work?

 

See the Pen bGdzzNG?editors=1111 by Arelwynn (@Arelwynn) on CodePen

Link to comment
Share on other sites

Mhhh... I'm not sure if I follow what you're trying to do, but it could be a eased stop to 0 degrees?

 

I remember a sample from @Carl about easing the timescale so partial credit to him, hopefully this is close to what you want to do:

 

See the Pen zYGeXEB by rhernando (@rhernando) on CodePen

 

The idea is to tween the animation instance's timescale to make it faster/slower and then in the stop button use the directional rotation feature of the CSS Plugin to rotate the to the shortest end angle. Now this only scratches the surface of this, since you still need to calculate, according to the current speed, angle and final angle, the time for the stop animation, that should be shorter or longer depending on those factors. Right now it stops the animation using a single time value which can look odd in some cases.

 

Hopefully this is what you're looking for and helps you get started.

 

Happy Tweening!!!

 

  • Like 6
Link to comment
Share on other sites

I wasn't sure if you just wanted a very simple "jump to the speed" effect or something more advanced like gradually changing speeds, but here's the simplest approach: 

See the Pen 50f4d16dcbb7acd8f85e540e8a4e2011?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice we're just reusing the same tween instance and just altering its timeScale. You could  certainly do it other ways too. Rodrigo is using a more advanced thing for the "off", but I think there's an easier way even for that. But before I dive into that, I want to confirm that's what you want. 

 

Oh, and @Rodrigo I wouldn't recommend accessing the _gsap stuff directly like that. Just use the built-in getProperty() which automatically returns a number anyway (unless you declare a unit): 

 

// OLD (bad)
currentAngle = parseFloat(box._gsap.rotation.replace("deg", ""));
const finalAngle = endAngles[Math.floor(currentAngle / 90)];

// NEW (good)
currentAngle = gsap.getProperty(box, "rotation");
const finalAngle = gsap.utils.snap(90, currentAngle);

Oh, and @Greg Stager remember that the default overwrite mode is "false", so tweens won't automatically overwrite each other. You were creating infinitely repeating tweens on every click on the same property of the same object. That's probably why you weren't seeing it stop - you had a bunch of tweens running on that same object.

 

You can set overwrite: true on your tweens or even set gsap.defaults({overwrite: "auto"}) to have the engine auto-sense conflicts like that and kill just the parts that overlap. 

 

Also, if you want to kill all the tweens of a particular object, check out gsap.killTweensOf(). In your case, gsap.killTweensOf("#box"). 

 

Oh, and @Rodrigo here's a fork of yours with InertiaPlugin doing the magic of stopping the spin: 

See the Pen 25d4fed9370f27e03a0f5627be73ae5d?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

First of all, thanks guys!

I am starting  with some small ideas and am working to better understand GSAP so forgive me if I ask what seem like simple questions as I experiment.

 

8 hours ago, Rodrigo said:

I'm not sure if I follow what you're trying to do

I was basically only trying to do what you see - not for any particular project - just for practice and learning GSAP. I wanted to control the speed of an animation with the buttons like a fan with high, med, and low speeds as well as an off position. Nothing more at this point. Ultimately, in this problem it was trying to get the  proper usage of the  kill()  command so the animation would stop.

 

4 hours ago, GreenSock said:

if you want to kill all the tweens of a particular object, check out gsap.killTweensOf(). In your case, gsap.killTweensOf("#box"). 

 

One of the many things I tried was 

gsap.kill("#box");

but that did not work. I admit that I didn't try to use   killTweensOf()  but why didn't the other one work?

 

4 hours ago, GreenSock said:

the default overwrite mode is "false", so tweens won't automatically overwrite each other. You were creating infinitely repeating tweens on every click on the same property of the same object. That's probably why you weren't seeing it stop - you had a bunch of tweens running on that same object.

I also tried only a single speed change. So click High then click Off. In this case only a single function call was called So I would not have multiple tweens at this point but the kill()  command did not work then either. So where is the appropriate use of  kill()  vs  killTweensOf() ?

 

As a side note, I originally started with a variable called speed for the duration parameter and had my buttons change the value of the variable but the only way I could get them to update was to call the animation along with the speed update. That is how I ended up with my current code. I thought perhaps my variable was hosing things up so I pulled it to simplify further but that wasn't it either. My next step after simply getting it to stop was to figure out how to get it to gradually slow to a stop so thanks for the extra step to branch off of.

I will study that example and dig a bit further into the timescale parameter.

 

Link to comment
Share on other sites

21 minutes ago, Greg Stager said:

One of the many things I tried was 


gsap.kill("#box");

but that did not work. I admit that I didn't try to use   killTweensOf()  but why didn't the other one work?

If you look in the docs for the gsap object, you will see that no method called .kill() exists for it. Only .killTweensOf() exists on the gsap object.

 

However, if you look at the Tween docs or Timeline docs you will see that they have .kill() methods. So in order to use .kill(), it has to be used on a Tween or Timeline reference itself. Thus you could rewrite your first pen like so:

See the Pen poJYgvY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that I also set overwrite: 'auto' on each tween so that new tweens kill off previous tweens that conflict.

 

21 minutes ago, Greg Stager said:

where is the appropriate use of  kill()  vs  killTweensOf() ?

Both can be used whenever you need to kill an animation. .kill() is more useful if you have a direct reference to the animation. .killTweensOf() is useful when you don't have that. 

  • Like 5
Link to comment
Share on other sites

Thanks for the extra clarification.

I had tried doing a similar tactic setting my animation to a variable but I didn't have any overwrite settings.

I had tried so many things that I thought should work but didn't so I just started trying everything else I could think of.

Alas... adding the overwrite parameter was not one of them.

 

I am guessing I won't forget that little tidbit now.

Sometimes the best way to learn is to get burned.

#scalded

  • Like 1
Link to comment
Share on other sites

3 minutes ago, Greg Stager said:

Alas... adding the overwrite parameter was not one of them.

Ya, it's not always the most intuitive that it doesn't automatically get overwritten. But the default being false instead of 'auto' makes it to where developers are fully aware when overwriting occurs :) 

  • Like 2
Link to comment
Share on other sites

11 hours ago, Greg Stager said:

OK - I give up. Been struggling with this for the last three hours.

I am by no means a JavaScript expert but I am pleased with the amount of things I am able to do with it.
GSAP tools are poised to really open things up for me but - MAAAN - am I taking it in the shorts.

Been there. Done that. I have nothing to add to all the great solutions offered by everyone above. I just wanted to offer you some words of encouragement as I know all too well how much one can struggle at the beginning of their JavaScript journey.

 

I think you're doing this exactly right by building stuff for no reason other than to learn how things work. I also think it's good to struggle for a bit to find your own answer but not hesitating to ask for help when you really need it. I've been hanging around here for close to five years now and it's truly a great group of people and a terrific place to learn GSAP and JavaScript. Best of luck to you.

 

giphy.gif

 

PS If you haven't read it yet, this is my story. 

 

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