Help width SVG animation by path

[Eduard Sergienko]

Hi everyone. Please help me solve the problem. I need to create animations along SVG paths. I have a minimal example of a path along which another short blue line should move. I'm using MotionPathPlugin for this purpose. There will be many such lines on the website. Overall, everything works as i need it to, except for one detail. Currently, this short blue line simply rotates around the path elements due to the autoRotate property. However, i need this line not just to rotate at the turns, but to bend and take on the appearance of that turn. In the screenshot, I roughly marked how it should be at the turns. I would be very grateful for your ideas.🙏

See the Pen dyLORXq by kutleraster (@kutleraster) on CodePen

[mvaneijgen]

Hi @Eduard Sergienko welcome to the forum!

 

Instead of the MotionPath plugin, check out our DrawSVG plugin. I've copied your path and gave it the same style as the shape you had before. and instead of a shape following a path this animates the stroke-dashoffset (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset), you could animate this by hand, but that is going to require a lot of debugging and you'll have to fix some browser inconsistancies, which the DrawSVG plugins already solves for you! https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/

 

I was not completely sure of your setup, so I just kept the bare minimum for it to work. Hope it helps and happy tweening! 

 

See the Pen wvZomXM?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Eduard Sergienko]

3 hours ago, mvaneijgen said:

Hi @Eduard Sergienko welcome to the forum!

 

Instead of the MotionPath plugin, check out our DrawSVG plugin. I've copied your path and gave it the same style as the shape you had before. and instead of a shape following a path this animates the stroke-dashoffset (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset), you could animate this by hand, but that is going to require a lot of debugging and you'll have to fix some browser inconsistancies, which the DrawSVG plugins already solves for you! https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/

 

I was not completely sure of your setup, so I just kept the bare minimum for it to work. Hope it helps and happy tweening! 

 

 

 

Thank you very much. I will try to implement this on my website.🙏