Jump to content


Scaling from center not working

Moderator Tag
Go to solution Solved by mikel,

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'm trying to scale down an SVG rectangle. The CSS:

transform: scaleX(0); -> transform: scaleX(1);
transform-origin: 'center'; 

Does exactly what I wan't to achieve (scaling width from center position). However when I use the settings in TweenMax e.g.:


.fromTo('#center', 0.7, { transform: 'scaleX(0)', transformOrigin: 'center' }, { transform: 'scaleX(1)' })


It transform from the left with matrix.


How can I force to use the transform: scaleX(#) animation?

Link to comment
Share on other sites

here is a super simplified version of what it sounds like you are trying to do:




If not, please provide more details and a demo so that we can get a better idea of what you need.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

@atomboy don't mean to hijack your thread but I trying to accomplish something similar.


See the Pen RVxpym by kjames (@kjames) on CodePen


There's a white rect that I would like to scale out from the center to a specific width, have the white triangle scale up (to what is shown now) on hover, then on click have to bottom two triangle scale up to the size they are now.


my animation also starts from the left side.

  • Like 1
Link to comment
Share on other sites

Width is not a transform, nor is it a CSS property on a rect.


You have a couple options here. You can set it's width to whatever you want, set scaleX to 0, and then animate scaleX to 1.


See the Pen LyeapN by osublake (@osublake) on CodePen



Or you can set it's x attribute to the middle, animate its width to whatever you want, and counteract that by animating it's x attribute to 0.


See the Pen dWJrYp?editors=1010 by osublake (@osublake) on CodePen


Not sure what you're trying to do with triangles though.

  • Like 3
Link to comment
Share on other sites

Hi @OSUblake,


Thanks. Essentially, on hover, the rect would scale up, after a slight delay the white triangle will scale up (from 0) to the size it is now.

Once clicked the bottom two triangles will scale up, the click should also cause the white rect and tri to stay visible . Clicking on it again will reverse the animation.




I updated the pen. I got the reverse and on click to work, I think I have redundant code. I would like this happen for the other three options in the bar. 


I came across this, 

See the Pen OWKevR by osublake (@osublake) on CodePen

which seems to partially do what I want.

Link to comment
Share on other sites

  • 5 years later...

just chiming in to say thanks to @mikel for dropping in that super helpful demo. wow.

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