Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

Divs will not scale from center

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

:)

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