transform around centre

[wave 1 Likes (Newbie)]

Is it possible in the JS version of gsap to rotate or enlarge an image about its centre rather than from a top corner? I think you can do this with the TransformAroundCenter plugin in AS but can't find it for JS.

[Jonathan 5,176 Likes (Superhero)]

Hello wave, and Welcome to the GreenSock Forum!

 

This can be done by using the CSS property transform-origin, like this:

 

See the Pen mPOpyw by jonathan (@jonathan) on CodePen

 

The above code example will first scale the element around its center, and then rotate the element around its center.

// create a new timeline in a paused state
var tl = new TimelineMax({ paused:true, yoyo:true, repeat:-1 });

// set the initial scale and rotation to 0
// and the transform-origin 50% 50%
TweenMax.set("#img", {
  scale:0,
  roatation: 0,
  transformOrigin:"50% 50%"         // make transform origin be center for x and y axis
});

tl
.to("#img", 2, {scale:1})           // scale element to 100%
.to("#img", 2, {rotation:"+=360"})  // rotate element by a relative value of 360deg
.play();                            // play the timeline

[Carl 9,066 Likes (Superhero)]

Jonathan is exactly right, when transforming  (scale, rotation, skew)  an element transformOrigin allows you to select any point. The center is the default. 

 

If you are animating the width and height those changes will always occur from top left corner. No way of changing that.

[wave 1 Likes (Newbie)]

Thanks, I'll give it a whirl.