[GSAP rotate shake wobble]

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

[GSAP rotate shake wobble]

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

[GSAP rotate shake wobble]

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

[How to get boxShadow: to work]

HI Rodrigo,

 

Thanks for the prompt reply,

 

It's going to be rather difficult for me to illustrate the problem using codepen as it is a canvas project i am working on.

The elements that i am animating are in the canvas library and are referenced in the javascript code like this:

 

var navigation = new lib.navigation();
this.addChild(navigation);
navigation.x = 58;
navigation.y = 500;

 

which i can't illustrate using codepen?

 

Any thoughts?

[How to get boxShadow: to work]

HI,

 

I have been using GSAP JS successfully in an HTML5 canvas project to do this sort of thing:

TweenMax.to(navigation, 0.2, {scaleX:1.1, scaleY:1.1, ease: Power2. easeOut});

 

I am trying to play around and use some other effects, but having NO success with this:

TweenMax.to(navigation, 2, {boxShadow:"0px 0px 10px 10px black"});

 

Now i know that to use "boxShadow" i need to use the CSS Plugin, though as i have:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

in my html, that should be sufficient?

 

Can you please help me to apply the CSS effects to my elements that are loaded thus:

 

var navigation = new lib.navigation();
this.addChild(navigation);
navigation.x = 58;
navigation.y = 500;

 

Many thanks,

Tony