Jump to content
Search Community

Divs will not scale from center

kathryn.crawford test
Moderator Tag

Go to solution Solved by Carl,

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'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

  • Solution

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:




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

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