Jump to content

Mr Pablo

Odd scale and position behaviour?

Moderator Tag

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

I am positioning an image via some Tweens, and have set the x & y properties, as well as scaleX and scaleY.


Doing so, the image is assigned a transform matrix in CSS, but I don't think it is behaving as it should.


E.g. I have a 200x200 square "canvas/stage", I place a 200x200 colured square, positioned 0,0 and scaled by 0.5,0.5. This means I should see a 100x100 square, in the top left corner. BUT what I get is a 100x100 square, in the centre of the canvas/stage area.


So it looks like the scaling is working after the positioning, but I need the scaling to happen first, to keep the images transform point at the top left.


Is there a way to make sure this is the case?

Link to comment
Share on other sites

CSS transforms use the center of the object as their origin. You can set the transformOrigin as follows:

TweenLite.to(elem, 1, {scale:0.5, transformOrigin:"left top"})

//or use any units
TweenLite.to(elem, 1, {scale:0.5, transformOrigin:"0% 0%"})

Check the CSSPlugin docs for more info on transformOrigin

  • Like 1
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.