Shake animation?

[MrDys]

I'm trying to figure out a simple way to shake an element with GSAP. The way that Animate.css handles it, is translating 10 pixels to the left, then, 20 pixels  to the right, and repeating. Makes sense. This can be replicated as-is with a rather redundant TimelineLite setup, but I was wondering if there was a cleaner GSAP approach, perhaps using yoyo and/or repeat and/or RoughEase?

 

Something like:

TweenMax.to(element, 0.1, {x:"+=20", yoyo:true, repeat:5});

really just moves the element to the right and then back to the origin. I'm looking for something that would move it to the right, back through the origin to the left, and then back to the origin. A bipolar motion, rather than a unipolar motion, if you want to think about it like that. Is there a simple, non-timeline solution?

[Jonathan]

Hello , and Welcome to the GreenSock Forums!

 

Have you tried to use two tweens instead of one? One that first goes right  +=20, and then goes left -=20.

 

Working example:

See the Pen ozfJk by jonathan (@jonathan) on CodePen.

TweenMax.to(element, 0.1, {x:"+=20", yoyo:true, repeat:5});
TweenMax.to(element, 0.1, {x:"-=20", yoyo:true, repeat:5});

:

In my codpen example, I also set repeat to infinite (-1) just so you can see the effect without refreshing  the page.

 

Does that help?

[Carl]

Hi and welcome to the GreenSock forums.

 

The challenge of this task is that a single tween must have start and end values that are different.

Essentially what you are describing is an animation that ends where it begins.

 

For shakes I prefer to use RoughEase as it has a lot of parameters that you can tweak for different effects.

However a RoughEase still has the need for an end that is different than the start. To get around this I use a fromTo() tween that has the from value less than the original and to value greater than the original. By using clearProps:"x" on my tween it means the engine will literally clear the end x values when the tween is done, thus reverting back to the natural, pre-tween values.

Take a look at this example:

$(".box").click(function(){
  TweenLite.fromTo(this, 0.3, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:20, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
})

 

http://codepen.io/GreenSock/pen/hznvq?editors=101

 

* note the demo also shows how to do it using a more simple repeating fromTo() tween

[kalreg]

Here is my version of Carl's shake - i wanted to achieve a button that is shaking more rapidly - i hope it will help someone.
 

function abc(i) {
if ( i > 10 ) { return }
i++;
  TweenLite.fromTo("#button0", 1/(i*2), {x:-3*i/3}, {x:3*i/2, ease:RoughEase.ease.config({strength:5, points:20, template:Linear.easeNone, randomize:true}) , clearProps:"x"})
   TweenLite.fromTo("#button0", 1/(i*2), {y: -3*i/3}, {y: 3*i/2, ease:RoughEase.ease.config({strength:5, points:20, template:Linear.easeNone, randomize:true}), onComplete: function() { abc(i) } , clearProps:"y"} )
   }
abc(0)

[Carl]

Hi Kalreg,

 

Thanks for the contribution. 

 

Its worth noting that CustomWiggle is the best option for shaking animations. They are highly configurable and naturally return to the starting values. No need to use clearProps or do any other cleanup.

 

https://greensock.com/customwiggle 

[PointC]

I heard there's a really cool demo called Wiggle World where you can interactively try some wiggle settings. From what I understand, the guy that made it is kind of a goofball, but the demo is fun.    

 

See the Pen ZLPdoY by PointC (@PointC) on CodePen.

[grovkillen]

On 3/7/2017 at 7:16 PM, Carl said:

Hi Kalreg,

 

Thanks for the contribution. 

 

Its worth noting that CustomWiggle is the best option for shaking animations. They are highly configurable and naturally return to the starting values. No need to use clearProps or do any other cleanup.

 

https://greensock.com/customwiggle 

Okay, I really like this one but if my user is double clicking the "OK" button the wiggle will get stuck, I guess this is due to the fact of the async approach which make two instances of the wiggle function compete of the default state. I use the wiggle to show that a none-allowed entry has been tried. But some users tend to double click :S

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

What you can do is kill any previous animation affecting the wiggle target in the button click event and then create a new tween or even more simple, create a GSAP instance outside the click handler scope and restart it on every click:

 

const wiggleTween = TweenLite.to(box, 0.5, {
  x: 5,
  ease: "myWiggle",
  paused: true
});

myButton.addEventListener("click", function() {
  wiggleTween.restart();
});

 

See the Pen VgJBpb?editors=0010 by rhernando (@rhernando) on CodePen.

 

As you can see in the live sample I'm using the second approach and regardless of how many times you click on the button the animation runs it's regular course, soto speak.

 

Happy Tweening!!

[grovkillen]

Thank you for the help. This approach was more robust and I will use it in my project. Thanks once again!

[eni9889]

Hi,

 

I am using the custom wiggle approach from above but the input text moves up when I hit enter multiple times like so any idea what I could be doing wrong? This is on Safari on MacOS

 

[ZachSaucier]

1 hour ago, eni9889 said:

I am using the custom wiggle approach from above but the input text moves up when I hit enter multiple times like so any idea what I could be doing wrong? This is on Safari on MacOS

Hey eni9889. This behavior is almost certainly unrelated to the custom wiggle ease. 

 

It sounds like your text area size can change based on the content. You probably want to set the height to a maximum.

[eni9889]

That is odd because if I turn off the animation and hit enter multiple times the same thing does not happen. Also, it does not happen if I use pure CSS animations 

[ZachSaucier]

Can you please create a minimal demo of the issue? See the thread below for more info on how to do so:

 

[eni9889]

This Pen will show the issue on Safari. Just press the wiggle box button multiple times:

 

See the Pen RwPMdKN by eni9889 (@eni9889) on CodePen.

[ZachSaucier]

28 minutes ago, eni9889 said:

This Pen will show the issue on Safari. Just press the wiggle box button multiple times

Wild! I've never seen anything like that before. The inline style is 100% correct but the visual position is off. If you change the focus it corrects itself.

 

This has nothing to do with CustomWiggle though. If you remove the ease then it still occurs. It's just a rendering bug in Safari.

 

You can work around this bug by adding will-change: transform; to the #box CSS.

 

Thanks for bringing it up though - this is very interesting and may be helpful to other users.

[GreenSock]

That is indeed a super strange Safari bug! As Zach pointed out, you can fix it with will-change: transform or you can set force3D: true on the tween. It looks like the problem happens when the transform goes from 3D to 2D (often browsers handle the rendering differently, where 3D stuff is layerized and pushed to the GPU and that's why GSAP does that by default during the tween, to boost performance, and then 2D frees up the GPU memory and **sometimes**...in some browsers...seems to render things a bit more sharply). And again, it's totally unrelated to GSAP - it's definitely a Safari bug. 

[minhaj57sorder]

Try this shake animation.

See the Pen rNwQwzo?editors=0010 by minhaj57sorder (@minhaj57sorder) on CodePen.