Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sali and the kat

Stop animation function

Recommended Posts

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

Link to comment
Share on other sites

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!

 

  • Like 4
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

:)

 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

:)

 

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

:)

 

 

  • Like 4
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

Hi @Sahil,

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

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

Kind regards
Mikel
 
 
 
  • Like 3
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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

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