Morph Svg into X hamburger

[MarkD617 5 Likes (Newbie)]

Just started using GSAP and am a bit stumped on my next steps for this SVG morph...I like what i have going so far but is there a way to know continue the animation so the middle two paths morph into an "x"???

See the Pen ZEbXoLm by MarkDonatelli (@MarkDonatelli) on CodePen

[PointC 14,425 Likes (Superhero)]

Hi and welcome to the forum.

 

You'd just need a morph target for each of those paths. In this case, I'd think actual line elements would be much easier to use rather than paths. You could then easily animate the x1, x2/y1, y2 attributes of the line and/or rotate it into position with no morph requirement. 

 

Not that morphing this is bad or wrong. Just a general observation and my two cents worth. YMMV.

 

Happy tweening.

 

[ZachSaucier 7,152 Likes (Superhero)]

Hey Mark and welcome.

 

There are other threads that ask about animating hamburger icons that you could take a look at as well:

And one from @elegantseagulls 

See the Pen QyyzVX by ryan_labar (@ryan_labar) on CodePen

[PointC 14,425 Likes (Superhero)]

Here's an oldie but a goodie I made a couple years ago. (Featuring DrawSVG) Freshly updated to GSAP 3.

 

See the Pen zLbxzO by PointC (@PointC) on CodePen