Jump to content


Continue animating SVG on hover

Moderator Tag

Recommended Posts

Hi all, I'm a bit confused on how to get the following result. I want to create an animation of different SVG elements that does the following (see the codepen link for the idea): 

  • start: Animate menu bars in
  • start: morph menu bars to logo letters 
  • onHover: morph logo letters back to menu bars
  • onClick: animate menu bars into a closing button

The start is there, but I am not sure how to reverse just the logo letters back to menu bars on hover. I hope you guys can point me into the right directions!


Thanks :)

See the Pen YyJaoM by aderaaij (@aderaaij) on CodePen

Link to comment
Share on other sites

oh that's fast, and way more elegant than I came up with, and addPause() is a nice one, thanks! 


One questions though:


1. Is it possible to make the animation so that first the bars animate in, then they morph into the logo, and only on hover the logo morphs into the menu bar (and on mouseout back to the logo)?

Link to comment
Share on other sites

That's awesome! The code is pretty self explanatory as well, so no questions there. 


I really need to do some reading up in the docs, there seems to be a solution for everything already.


Thanks again for the quick support, greatly appreciated! And also thank you for showing multiple methods, very useful. 



edit: One more question while I'm at it, if I wanted to add a delay before morphing the menubars into the logo, how would I do that? If I add an extra property with '+=.5' to the second tween, the entire animation reverses again on hover. 

Edited by aderaaij
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.