How to animate from center? (without using scale)

[gimperdaniel]

My ultimate goal here is to create a ripple animation using empty divs and gsap. However I am stuck at the very beginning of it....whenever I transform an element, it transforms from top/left. I need it to transform from center.

 

 

Using scss I can set:

.ripples{

  padding:100px;
  position: relative;

  div{
    border:1px solid black;
    width:10px;
    height:10px;
    padding:0;
    position:absolute;
    top:0;
    left:0;
  }

}

JS:

var rip = new TimelineMax();

       rip.add(TweenMax.to($(".ripples div:eq(0)"), 2, {padding:'20px'})); 

I have tried the above by also adjusting the height/width. Either way, it transforms from top/left, and not from center as it was specified in the css. it only seem to work when I use  "scale". However I cannot use scale because my ripples are just empty divs with a 1px border. When you use scale the border thickens. I wish the border to stay the same size.

 

 

HTML:

<div class="ripples">

   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

</div>

This was my first idea on how to create the ripple.. .animating each div using tweenmax. Maybe there's a better approach to this issue, but regardless I wish to know how to objects from center, and not from top/left.

 

 

Update: 

 

I am adding a codepen to an example using scale (which is not ideal because of how the border thickens).

 

See the Pen IfymK by anon (@anon) on CodePen

[Carl]

When you change the width and height, or add padding it will always happen from the top / left. That is just a css thing.

One solution might be to offset the position of the elements while they are having their size changed to make it appear like they are animating from center

 

http://codepen.io/anon/pen/ofKdc

 

*note: browsers aren't terribly good at animating width / height / border-radius. The effect can appear a little jerky as the all values have to render at integer pixel values. You don't get the sub-pixel rendering that transforms offer.

[gimperdaniel]

@Carl - your solution is great. Much shorter and more efficient. Thank you.