Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
wave

transform around centre

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Thanks, I'll give it a whirl.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×