Scaling from center not working

[atomboy]

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?

[mikel]

Hi atomboy,

 

please have a look to:  

See the Pen 17b4f47aa28f02e305dab386e9f79e89?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Best regards

Manfred

[Carl]

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.

[KevinJ]

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

[OSUblake]

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.

[KevinJ]

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.

[OSUblake]

So something like this?

 

See the Pen PmQqZP?editors=0010 by osublake (@osublake) on CodePen

 

[KevinJ]

Exactly. You da man @OSUblake Thanks.

[brennamacquarrie]

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