Jump to content
GreenSock

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

Scaling from center not working

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:

 

http://codepen.io/GreenSock/pen/JWaNbz

 

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.

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.

 

KJ

 

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

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