Try to animate vertical svg line

[Katapub]

Hi, 

 

I'm very new to Gsap animation. I'm trying to do something simple, but it doesn't work, even though I started from this very simple example. Maybe I'm not converting it to gsap 3 correctly... 

 

See the Pen mJyZdj by MAW (@MAW) on CodePen

 

Since my start line is vertical, I only have x and y coordinates, and the final result is with a "d" attributes. Is it not working because I am trying to work with apples and oranges? 

 

Thanks for your help.

See the Pen eYZKKZJ by cepheide (@cepheide) on CodePen

[PointC]

36 minutes ago, Katapub said:

Is it not working because I am trying to work with apples and oranges? 

Correct. Your lines have x1/x2/y1/y2 attributes but no d attribute. You'd want to convert those to paths in your vector software or use GSAP to convert them. The morph plugin can do that for you. You'd simply load that plugin and use this code before your tweens.

 

MorphSVGPlugin.convertToPath("line");

More info:

https://greensock.com/docs/v3/Plugins/MorphSVGPlugin/static.convertToPath()

 

Happy tweening and welcome to the forum.

 

[ZachSaucier]

MotionPathPlugin also has a convertToPath method  

[PointC]

Good point. I keep forgetting that. Back in my day it was only available in the morph plugin. 👴

[Katapub]

Thank you very much! It gave me some results, but still need to understand how Illustrator is generating de svg code. I have to manipulate it to have the perfect result I'm looking for.

 

Have a nice day.