Stop animation function

[sali and the kat 9 Likes (Newbie)]

Hi, I have this shake function that runs inside a switch javascript statement :

 

     function shake(elem){
                    function Tween(){
                    var T= TweenLite.to(elem,0.04,{x:R(-0.1,0.1),y:R(-0.1,0.1),rotation:R(-0.1,0.1),ease:Quad.easeInOut,onComplete:Tween})
                    };
                    
                    Tween();
                    
                    function R(max,min){return Math.random()*(max-min)+min};
                
                    
                }

 

 

In another switch case I need it to stop but I cant figure out how. Pls, any tips? 

 

thanks so much

[Carl 9,066 Likes (Superhero)]

Hi, in cases like this it really helps to have a reduced test case to work with.

 

i would suggest you set up your function so that it returns your tween. That way you can have a reference to it.

I'm not really following why you are nesting functions like that, but here is a general setup you can work with

 

 function shake(elem){
    var T= TweenLite.to(elem,0.04,{x:R(-0.1,0.1),y:R(-0.1,0.1),rotation:R(-0.1,0.1),ease:Quad.easeInOut,onComplete:Tween})
    return T;
};
                        
function R(max,min){return Math.random()*(max-min)+min};

//somewhere else in your code create a shake animation

var myShake = shake(someElement); // sets myShake equal to the tween that shake() returns;

//somewhere else you can stop the shake

myShake.pause();

 

 

 

This article: https://css-tricks.com/writing-smarter-animation-code/ goes over how to set up functions that return animations. The animations the functions return can be complex timelines or a single tween.

 

If you need more help, please consider creating a simple demo. We don't need anything with complex switch statements or anything.

Thanks!

 

[sali and the kat 9 Likes (Newbie)]

THANK YOU !

 

I am testing and in console error says: Uncaught ReferenceError: Tween is not defined

 

code:

function shake(elem){     var T= TweenLite.to(elem,0.04,{x:R(-0.1,0.1),y:R(-0.1,0.1),rotation:R(-0.1,0.1),ease:Quad.easeInOut,onComplete:Tween})    

return T; };

 

If I remove the onComplete function Tween, it just shakes once (and i need it continuos)

 

What can it be?

 

Thanks you so much again, ( I could watch the first part video and its really helpful). 

sorry for not making a codepen, the mess i have in my code is huge. 

[PointC 8,599 Likes (Superhero)]

Yes - Tween is your onComplete function that apparently doesn't exist. For a infinite animation you can use TweenMax and set repeat:-1. 

 

Happy tweening.

 

[sali and the kat 9 Likes (Newbie)]

Or this? it also works

 

function shake(elem){
                  var T= TweenLite.to(elem,0.04,{x:R(-0.1,0.1),y:R(-0.1,0.1),rotation:R(-0.1,0.1),ease:Quad.easeInOut,onComplete:shake, onCompleteParams:[elem]});
                 return T;
                  };
                
                function R(max,min){return Math.random()*(max-min)+min};

 

kul, Thank you again. 

[PointC 8,599 Likes (Superhero)]

Yep that's fine if you want to stay with TweenLite. I just prefer a CDN and using TweenMax so I have access to the additional features of repeat, yoyo, etc. and auto loading the extra plugins.

 

Happy tweening.

 

[sali and the kat 9 Likes (Newbie)]

I understand.

The shake(elem) function is in the mouseover of the element. I dont know why but with repeat:-1 it only moves once per mouse over. 

And the myShake.pause() is on the mouseout but doesnt work. 

I really need to prepare a decent codepen and stop bothering. 

merci!

[PointC 8,599 Likes (Superhero)]

Yes - a demo makes it much easier to help you. It doesn't need to be your whole project. Just a simplified version with enough code to produce the error or demonstrate the question. Here's a quick demo for you with the code that @Carl listed above. I just added some event listeners. 

 

See the Pen zLVMpN by PointC (@PointC) on CodePen

 

Happy tweening.

 

 

[sali and the kat 9 Likes (Newbie)]

Hi, thanks so much. 

I prepared this pen, its a long code, tried to make it work without any other codes , it doesnt but it can give an idea. (hope...) I have at least 30 buttons, thats why the switch case function. Also, think its important to mention, the button is an external loaded svg element. (in this code pen i used the html div) Thank you!!

 

See the Pen djxoeM by Salithekat (@Salithekat) on CodePen

 

[Sahil 2,541 Likes (Superhero)]

Switch is not ideal for such scenarios.

 

You can instead keep track of active animation and element, and reset them when you hover on other element.

 

Also, on codepen under each panel there is dropdown with option 'tidy'. Try clicking on that, you won't have to manually format your code.

 

See the Pen LBwGNB?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Also, you don't need to return a paused tween because your animation plays as soon as you construct the tween. Unless you are trying to reuse same tween for the element, in that case you can create objects that will contain element and it's tween. So you can pause it and resume it.

[sali and the kat 9 Likes (Newbie)]

Thank you so much. I will try and send report. 

[mikel 1,823 Likes (Superhero)]

Hi @Sahil,

What speaks against a shorter version with 'pause (0)' ?

 

See the Pen pZMPdZ by mikeK (@mikeK) on CodePen

Kind regards

Mikel

 

 

 

[sali and the kat 9 Likes (Newbie)]

Thank U x3

 

From the 30 buttons only one has this animation, thats why I inisisted with the switch case. And I managed to insert your code in it. And all the rest of the buttons will have their own animation (and pause aswell, and sounds and it gets a mess ). This new short code is super helpful, I can reuse it for playing and pausing the rest of the 29 animations.  thanks so much, mean it. 

[Sahil 2,541 Likes (Superhero)]

3 hours ago, mikel said:

What speaks against a shorter version with 'pause (0)' ?

 

Ya that works too, I was just overthinking about when you mouseout element will jump. But of course it won't even be noticeable with such short duration.

 

@sali and the kat You might want to replace your 'mouseover' and 'mouseout' events with 'mouseenter' and 'mouseleave'. If your elements contain child element then mouseover will keep triggering on child elements, it won't happen with 'mouseenter' and 'mouseleave'.

[sali and the kat 9 Likes (Newbie)]

Done!

 

Merci much for every advice