Shake animation?

[MrDys 1 Likes (Newbie)]

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 5,176 Likes (Superhero)]

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 9,066 Likes (Superhero)]

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 6 Likes (Newbie)]

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 9,066 Likes (Superhero)]

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 8,599 Likes (Superhero)]

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 0 Likes (Newbie)]

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 2,662 Likes (Superhero)]

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 0 Likes (Newbie)]

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