Are there issues with TransformAroundPoint, yoyo, repeat and RoughEase?

[cerulean]

I've been trying to work up a 'shaking' effect on elements, using RoughEase. Rotations, x, y all get stuck at the end and don't return to their original spots, as yoyo:true, repeat:1 would seem to indicate they would. (centPoint is stageWidth/2, stageHeight/2) —I'm sure I'm missing something but I was curious whether doing yoyo and repeat with transformAroundPoint and RoughEase was a problem in some way…

private function makeNewShakeUpTimeline($objects:Array):TimelineMax {

var tl:TimelineMax = new TimelineMax;

var centPoint:Point = new Point(TTConstants.FULL_WIDTH/2,TTConstants.FULL_HEIGHT/2);

var dirx:String = Math.random() > .5 ? "+=20" : "-=20";

var diry:String = Math.random() > .5 ? "+=20" : "-=20";

tl.add(TweenMax.to($objects,.5,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:1,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:false,points:50,strength:3})}),0);

dirx= Math.random() > .5 ? "+=10" : "-=10";

diry = Math.random() > .5 ? "+=10" : "-=10";

tl.add(TweenMax.to($objects,.25,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:3,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:false,points:40,strength:2})}),.5);

dirx= Math.random() > .5 ? "+=5" : "-=5";

diry = Math.random() > .5 ? "+=5" : "-=5";

tl.add(TweenMax.to($objects,.25,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:3,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:true,taper:"out",points:30,strength:1})}),.75);

return tl;

}

[Carl]

Hi,

 

Thanks for providing the code.

 

The problem is that you've got the transform-related values like rotation, x, and y OUTSIDE the transformAroundPoint object. That means that there's overwriting happening because whenever a transformAroundPoint tween starts, it says "I'm in control of all transformations – kill any other rotation, x, y, scaleX, or scaleY stuff on this target".

 

In order to transform around a particular point, the plugin MUST alter the x/y position of the target. So, for example, let's say we've got a 200x200 MovieClip whose registration point is in the upper left corner, and it's at x:0, y:0; the following would be a logical impossibility: 

TweenLite.to(obj, 1, {transformAroundPoint:{point:new Point(100, 100), scaleX:2, scaleY:2}, x:50, y:50});

Imagine it scaling around the center (100, 100) - where would the upper left corner end up? At –100, -100! So we can't tween x and y to 50 at the same time, otherwise it's not really scaling around that 100,100 point. 

 

Make sense?

 

 

So tuck things like this:

 

//GOOD

transformAroundPoint:{point:point, rotation:rotation}

 

//BAD:

transformAroundPoint:{point:point}, rotation:rotation

Let us know if you need more help.