Jump to content


Morph Svg into X hamburger

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.



  • Like 3
Link to comment
Share on other sites

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



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.