svg path animation horizontal

[willenglishiv]

So see the above referenced codepen:

 

I wanted to animate the horizontal lines (smaller to bigger) but doing width also shrinks down the height of the svg and I'm trying to prevent that.

 

As a bonus (because I'm sure once the one liner comes out to do this) I also need to be able to do it in the reverse direction (left to right and right to left)

See the Pen YzyJbre by willenglishiv (@willenglishiv) on CodePen

[PointC]

I'm not sure you need SVG to do this. Just a couple divs would probably be fine, but here's a quick option with SVG. I'm just animating the scaleX of the rect elements. You could also animate the width too.

 

See the Pen b55b0cdcfac2e2cf7de3b554feb48b52 by PointC (@PointC) on CodePen

[willenglishiv]

Oh yeah, curious as to what the div example would be? The reason I went svg is because I want to be able to style it without redoing the animation.

[PointC]

29 minutes ago, willenglishiv said:

curious as to what the div example would be?

 

Just some absolutely positioned divs and use the same tweens.

 

See the Pen af8007a4c6957b8e327075250ff34803 by PointC (@PointC) on CodePen