Continue animating SVG on hover

[aderaaij 1 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

Hi aderaaij 

 

pls check this out : 

See the Pen YyJLXb by MAW (@MAW) on CodePen

[aderaaij 1 Likes (Newbie)]

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)?

[Diaco 1,948 Likes (Superhero)]

Yep , pls check the pen again : 

See the Pen YyJLXb by MAW (@MAW) on CodePen

[aderaaij 1 Likes (Newbie)]

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 November 8, 2015 by aderaaij