DrawSVG // Stroke has 3 startingpoints

[LIEPS GmbH]

Hello, i just wanted to create a stroke animation but it has 3 starting portions in the middle of the stroke. It should started from the bottom and should go to the top in one line. Before generating the SVG Code i had to connect the strokes in Adobe Illustrator because these strokes were separated. 

What can i do to solve this problem?

See the Pen KKbYZQW by Sofatroll (@Sofatroll) on CodePen

[mvaneijgen]

Hi @LIEPS GmbH welcome to the forum and thanks for being a Club Greensock member!

 

Creating SVG ready for animation is a skill on to it self. It indeed looked like you had created one line, but that wasn't the case. My advies would be to enable "Outline" mode (cmd + Y or ctrl + Y, View > Outline)  in Illustrator and tweak the line with the "Direct Select Arrow (A)", and selecting the two points > right click "Join", then manipulate the line to see if they are really joined to getter. Also remove unesserarly points on the line (really easy to spot with "Outline" mode on). 

 

Also check out our own @PointC turorials on SVG https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ 

 

Hope it helps and happy tweening! 

 

See the Pen gOZyegz?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen

[LIEPS GmbH]

Hey @mvaneijgen thanks for your solution/advice & the SVG tutorial for path directions. Now i get what i want!

Greetings from germany!