Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pauljohnknight

Tween a Div on its X-axis from the righthand side and maintain border-width

Recommended Posts

Hi

 

 

I would like to tween a <div> with a 25px border so that it shrinks in from the right.  I know when animating I should really use the scaleX property, but this shrinks the vertical borders of the div.

 

The obvious work around in terms of keeping the border thickness uniform is to use the width property, but I can't set a transformOrigin on the width property, so I've used a hack and basically increased the right: px; value to counter this.  Here is the codepen to illustrate this:

 


 

Is there a more efficient solution to this i.e. how to reduce a div in size on its x-axis so it reduces in from the righthand side, without affecting the border thickness?  My main concern with doing it this way is the janking / flickering in the animation when integrated into the site it will be on.

 

P.S the pen is linked to a scrollMagic scene, so you will need to scroll to see the effect.

 

Thanks in advance for any help / ideas

 

Paul

See the Pen qagBWY by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

You can use x instead of right. It will have the same effect.

 

If you want to scale the container, you can do 9 way slicing, just like in Adobe Fireworks. Split your container up into a 3x3 grid, and put the parts you don't want distorted in the outside boxes. Now you can scale the center with affecting the borders.

 

Ubmontk.png

 

 

.

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