How to create a wiggle effect using GreenSock

Question

I can't see any built-in methods in TweenMax that lets you "wiggle" an object from side to side. It needs to be a really quick animation from its start position such as: x -> x-5 -> x+5 -> x-5 -> x+5 -> x.

Answer 1

If Bounce isn't working for you, you will have to create the effect yourself by working with a counter and the onComplete method!

Answer 2

Well i think you can use this, I found something similar but was for AS/Flash version so I had to make it JavaScript and it works for me, is simple:

var shakeTween = function(item, repeatCount){
var max = 5;
var min = -5;
TweenMax.to(item,0.1,{repeat:repeatCount-1, x:Math.floor(Math.random() * (max - min + 1) + min), delay:.1});
TweenMax.to(item,0.1,{y:0, x:0, delay:(repeatCount+1) * .1});
}

See the working example here

Where item is the HTML Element reference (you can use jquery or wharever) and repeatCount is how many times will play the wiggle animation.

Answer 3

Perhaps RoughEase might do the trick.

http://www.snorkl.tv/2010/10/use-tweenlites-easevisualizer-to-create-a-roughease-for-a-cool-flicker-effect/

http://www.greensock.com/roughease/

Answer 4

Just in case you're using JQuery, you can do this: $('#YourElementID').effect("bounce", {times:3, distance : -5, direction : 'right'}, 300);