MorphSVG beginner struggles

[maldo]

Hello, I'm trying out the MorphSVG plugin,  im trying my best to figure how to  make my animation end at, at the final svg (line6) and begging from the first one (line1) without it reversing my animation

 

See the Pen oNYXNVx by maldo4920 (@maldo4920) on CodePen.

[ZachSaucier]

Hey maldo and welcome to the GreenSock forums.

 

I'm a little confused. There isn't any reversing going on in terms of GSAP. Do you mean it looks like it's visually reversing? Think of it in terms of the program: it tries to animate the position of each point to the closest point in the next path. For your animations of paths 1->2->3->4, those points are further to the left which makes the line look like it's morphing to the left. However, for the animations of paths 4->5->6 are further to the right, so it looks like it's going that direction. 

 

To fix it, you should make the points go to the left each time. I would guess that the easiest way to do that would be to extend your path further to the left outside of the SVG's viewbox. Perhaps @PointC has some pointers for how to set this sort of thing up in a vector editor.

 

Side notes:

• We highly recommend using GSAP 3 formatting. Upgrading is easy!
• I think using defaults would save you time and make your code easier to maintain.

[mikel]

Hey @maldo

 

A fun option: you could position two SVGs so they fit together perfectly.

Then morph a little, maybe skew a bit and keep the whole thing flowing ...

 

See the Pen ZEBGaaj by mikeK (@mikeK) on CodePen.

 

Happy waving ...

Mikel