How to amination this SVG

[akrdesign]

I want to animate svg from one edge to second edge can anyone help me with this. I want to reveal svg from left to right.

Here is a sample project link https://stackblitz.com/edit/stackblitz-starters-nntne5?file=app%2Fpage.tsx

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! You're sharing page.tsx, but there is no GSAP code in that file. 

 

My suggestion would be to use the Draw SVG plugin, but your SVG is not created as a line but instead it are individual shapes, which you can't draw the way I think you're looking for. The only solution with your current SVG is to create a clip path and animate the clip path but that is probably not the effect you're after

 

See the Pen GRbbaaR by mvaneijgen (@mvaneijgen) on CodePen.

 

Animating a dashed line is even more involved and our own @PointC has a create post about that. Hope it helps and happy tweening! 

 

https://www.motiontricks.com/svg-dashed-line-animation/