GSAP rotate shake wobble

[TonyUK]

Hi,

 

I wonder if anyone can help with this.

 

I would like the reclangle to shake with rotation: 20, to rotation:-20, decreasing til it stops at its original rotation...which is 0.

 

TweenLite.fromTo("#rect", 2, { rotation: 20}, { rotation: -20, ease: RoughEase.ease.config({ strength: 5, points: 20, taper:"out", randomize: false}), clearProps: "rotation"});         
};

 

The problem is that because the "To" bit of the tween is a rotation value, so the rectangle shakes back and forth fine, but gradually going to the rotation: -20 (which i dont want).

 

Any ideas please?

See the Pen rWLxXv by Tony5587 (@Tony5587) on CodePen

[TonyUK]

...have just figured it out using Elastic ease instead of RoughEase:

 

TweenLite.fromTo("#rect", 4.5, { rotation: -20}, {rotation: 0,ease:Elastic. easeOut.config( 5, 0.1)});

 

Works fine.

[GreenSock]

I have very good news for you.

 

We're getting close to releasing CustomEase and CustomWiggle which will make this effect SUPER easy to create and tweak. Both tools are available to Club GreenSock members already. Here's a fork of your codepen, using CustomWiggle (which leverages CustomEase under the hood):

http://codepen.io/anon/pen/xROOwZ?editors=0010

 

Here's another demo that shows various "types" of wiggles: 

http://codepen.io/GreenSock/pen/LRqkOr?editors=0010

 

And of course you can tweak the number of wiggles too. 

 

To learn about CustomEase, check out this pre-release video: 

 

Does that help? 

[TonyUK]

Thanks...this is brilliant! Loving the custom graph and being able to have the end position the same as the start position with moves inbetween is great!

Cheers