motionpath How to only show the path that SVG has covered and not all of it (MotionPath)

[fawad4Real]

Hellow Everyone! Just need a little help. I only want to show the path that the SVG (Rocket )has covered and not the whole path. as the rocket goes up the path is shown.

See the Pen LYaaOZG by Fawad4real (@Fawad4real) on CodePen

[mvaneijgen]

Have you seen DrawSVG https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/. Check out @PointC tutorial how to do with with dashed paths https://www.motiontricks.com/svg-dashed-line-animation/

 

I would also recommend when creating a timeline to put the ScrollTrigger on the timeline, to prevent confusion later in development, because individual tweens can't have ScrollTrigger of them selfs, only a timeline can! 

 

Hope it helps and happy tweening! 

 

See the Pen jOJJavR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Carl]

I was working on a basic example, but the article from @PointC that  @mvaneijgen mentioned will explain everything you need to know and more!

 

See the Pen mdooqQX?editors=1010 by snorkltv (@snorkltv) on CodePen

[fawad4Real]

Is there a way to do it without DrawSVG, I cant afford it as I don't have means to buy it now. I would be very thankful to you all.

[Rodrigo]

You can use stroke-dasharray but you'll have to cover some cross-browser nuances, that the DrawSVG Plugin does, by yourself:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

 

https://css-tricks.com/almanac/properties/s/stroke-dasharray/

 

Happy Tweening!