Animation svg onScroll by svg Path

[tan.hoangngoc]

I did following this sample 

See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen

 . But I don't know why the car is not display on the top and not run from top to bottom. 
Please help me solve this problem! Thank you so much!

See the Pen jOwPNoJ by tan-hoangngoc (@tan-hoangngoc) on CodePen

[Cassie]

Hey Tan.

Your 'path' isn't really a path - it's a shape with a fill.

See the Pen 37980e27b250610c3c7d06f96a4de850?editors=0110 by cassie-codes (@cassie-codes) on CodePen

It's hard to see as the 'fill' is so narrow, but the stroke is running around the outside of the black path. 

you need a stroked path like the example you copied the tractor from.

[tan.hoangngoc]

Hi Cassie,

Do you have any solution for my case? May I convert a shape to path, do you know any tool to do it? 

I really don't know how to solve my problem.

Please help me!

[Cassie]

Easiest route is to redraw the path with vector graphics software.

SVG animation is 99% in the prep, so I recommend getting comfortable with a GUI like affinity designer or inkscape and/or getting familiarised with how to code SVG

I don't know of any way to automatically convert a shape to a path - that sounds incredibly complex to figure out, but maybe there is something out there.

 

 

[tan.hoangngoc]

I changed my svg to the path, but my code still could not run like as gsap sample, and I also  could not catch the start point like sample

Please help me! 

This is my SVG code

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1531.3 2822.2" style="enable-background:new 0 0 1531.3 2822.2;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#711E1B;}
</style>
<path id="Path_186" class="st0" d="M257.4,62.6c0.4,3,1.5,5.8,3.2,8.4c3.3,5,8,8.9,13.5,11.4c5.4,2.6,11.4,3.6,17.4,2.9
	c3-0.4,5.9-1.4,8.4-3c1.6-1.1,3-2.5,4.1-4.1c0.6-0.8,1.1-1.6,1.6-2.5c2-4.3,1.4-9.5-1.6-14.6c-3.4-5.4-8.4-9.7-14.3-12.3
	c-12.9-6-26.7-3.6-30.8,5.3c-0.4,0.9-0.7,1.9-0.9,2.8C257.3,58.7,257.2,60.7,257.4,62.6z M275.4,46.1c4.8,0.1,9.6,1.2,14,3.2
	c5.8,2.5,10.6,6.7,14,12c2.9,4.9,3.5,9.8,1.6,13.9c-0.4,0.8-0.8,1.5-1.4,2.2c-1.3,1.3-2.9,2.3-4.6,3.1c-2.5,1-5.1,1.6-7.8,1.6
	c-5.4,0-10.7-1.2-15.5-3.4c-4.9-2.2-9.2-5.5-12.6-9.6c-1.7-2.1-3-4.4-3.8-7c-0.6-1.8-0.8-3.7-0.6-5.7c0.2-0.8,0.4-1.6,0.8-2.3
	C262,49,268.1,46.1,275.4,46.1L275.4,46.1z"/>

</svg>

 

Edited August 27, 2021 by Cassie
edited to remove second path as it was lengthy and not needed to demonstrate issue

[Cassie]

These paths are still shapes with fills and not strokes.

This article by @PointC will help you

https://www.motiontricks.com/animated-handwriting-effect-part-1/

We can't do this for you as it's an asset prep issue not a GSAP issue