SVG MorphSVGPlugin question: How to to control and adjust the shape of the morph while the transformation?

[doolak]

Hello everybody, I am trying to animate a road in the way it follows its curve. Initially I have tried this with masking, but the result is not exactly what I want. Now I try to do it with the MorphSVGPlugin. The best result I achieved is in this CodePen: . How can I modify the morph transformation in the way it reveals the road from right to left, beginning with the initial rectangle, revealing the road smoothly on its path? Maybe there is a totally different way to achieve that? Or am I on the right way?

 

 

See the Pen oNaBZdx by doolak (@doolak) on CodePen

[Rodrigo]

Hi @doolak and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock!

 

I'm not really well versed in SVG and this type of animations, but luckily for us @PointC has created some really solid resources in this subject.

 

I really think that using masking is the way to go as shown in this codepen:

See the Pen 2e1bf659ce907d57e6b7619f1c937373 by PointC (@PointC) on CodePen

 

You can read more about the ins and outs of this in this great article:

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Hopefully this helps.

Happy Tweening!

[doolak]

Hi Rodrigo, thank you very very much for your quick reply and your help! This article looks like it is exactly what I need. I will let you know if  I get it working now! Thanks a lot!

[doolak]

Hi Rodrigo, the article helped me a lot! I got it working and learned a lot from it. Thanks again!