Search the Community
Showing results for tags 'x-axis'.
-
Tween a Div on its X-axis from the righthand side and maintain border-width
pauljohnknight posted a topic in GSAP
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: http://codepen.io/pauljohnknight/pen/qagBWY 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- 2 replies
-
- tween
- border-width
-
(and 1 more)
Tagged with:
-
Hi, I have an question, how to rotation object with origin? i need my object rotate stick at the left and middle of the object. same as the left 2 images Please Help~ Thanks alot.......