Divs will not scale from center

[kathryn.crawford]

I've created a bunch of divs that contain circle background images on my site. I've set them up to expand/contract on hover/mouseleave. The hover expand works great, but I can't get the transform origin to change. Maybe it's because they are absolutely positioned (which I can't change), but they all seem to expand from different starting points. The ones above expand from the top and the ones below from the bottom. Is there any way to get them all to expand from the center?

See the Pen pgLjay by kathryncrawford (@kathryncrawford) on CodePen

[Carl]

Thanks for the demo.

 

scale has a very specific meaning in the world of css and refers to the scale() function of a css transform: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

 

When you scale an element the transform-origin will be center by default

See here:

 

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

 

When using any css transform (scale, skewX, rotation, etc) you can also set the transform-origin to whatever you want using

TweenLite.to(thing, 1, {scale:1, transformOrigin:"0% 100%"});

However, in your demo you weren't technically scaling, you were adjusting the width and height. width and height always appear to happen from the top left corner because changing width and height do not affect the position of the element. Also, transformOrigin has no affect on how width and height operate.

 

It appeared that some items were growing from the bottom because they had a "bottom" css property which made their bottoms remain locked in place.

[kathryn.crawford]

@Carl, ah shoot. I was using width and height so that they would all scale to the same size even though they begin at different sizes. Guess it's back to the drawing board! Thanks!

[PointC]

Hi kathryn.crawford  ,

 

If you want all the divs to scale to the same size, (250 in your original pen),  you can just switch your scale to this:

scale:250/circles[i].clientWidth,

See the Pen XXEKjN by PointC (@PointC) on CodePen