Jump to content
GreenSock

judeDamien

Registration Point

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

Hi,

I have just started using TweenMax.js and I have an image that i am scaling. Right now the image is scaling from the top left corner. How do i get it to scale from the center?

 

In flash I just set the registration point to the center. How do i do this in js?

 

Thanks

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

It sounds that you're using width and height to change the image size. In that case there's not much to do, the box model specification establishes the top-left corner as the origin point and that can't be changed.

 

The options are use the scale parameter in the constructor, which is a transform property and by default the origin point is the element's center, but you can change it to whatever you want:

//the transform origin establishes the origin point
//considering the top-left corners as 0% and 0%
TweenLite.to(element, time, {scaleX:2, scaleY:2, transformOrigin:"50% 50%"});

//you can also use the scale shorthand to assign the same value to both X and Y
//by default the transform origin is 50% 50%
//the following code has the same effect than the previous
TweenLite.to(element, time, {scale:2})

Although scaling might cause some distortion in the image. To increase the height and width, you also have to tween the element's top and left margin or position, at the same time but usually results are not very smooth:

TweenLite.to(element, time, {height:"+=100", width:"+=100", left:"-=50", top:"-=50"});

Also is always very useful to get a peek at a reduced sample, in order to get a clear idea of what the issue could be, please take a look at this post:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

It sounds that you're using width and height to change the image size. In that case there's not much to do, the box model specification establishes the top-left corner as the origin point and that can't be changed.

 

The options are use the scale parameter in the constructor, which is a transform property and by default the origin point is the element's center, but you can change it to whatever you want:

//the transform origin establishes the origin point
//considering the top-left corners as 0% and 0%
TweenLite.to(element, time, {scaleX:2, scaleY:2, transformOrigin:"50% 50%"});

//you can also use the scale shorthand to assign the same value to both X and Y
//by default the transform origin is 50% 50%
//the following code has the same effect than the previous
TweenLite.to(element, time, {scale:2})

Although scaling might cause some distortion in the image. To increase the height and width, you also have to tween the element's top and left margin or position, at the same time but usually results are not very smooth:

TweenLite.to(element, time, {height:"+=100", width:"+=100", left:"-=50", top:"-=50"});

Also is always very useful to get a peek at a reduced sample, in order to get a clear idea of what the issue could be, please take a look at this post:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

 

Thanks :-)

scaleX and  scaleY works perfectly.

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