 Search In
• More options...
Find results that contain...
Find results in... # Are there issues with TransformAroundPoint, yoyo, repeat and RoughEase?

## Recommended Posts

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";

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

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

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

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

return tl;

}

##### Share on other sites

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}`

`transformAroundPoint:{point:point}, rotation:rotation`

Let us know if you need more help.

• 1