Jump to content
GreenSock

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

Registration Point

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×