1

I'd like to animate my Hamburger menus for my website landing page.

I don't want to do the standard "3 Bars" changing to an "X", which uses the "WebKit". Why not simply animate 2-3 low-res bitmaps rather than loading Webkit? I don't want to slow down my landing page any further.

There is a nice & unusual example on CodePen (12 yrs old), but unfortunately, no HTML is given. Also, from the javascript code, it appears that some special libraries are called which are not listed. The CodePen runs but the copied code here does not.

CodePen link:
Burger Button Animation

var s           = Snap().attr({viewBox:'0 0 100 100'}),
mid         = s.path("M0 40L100 40L100 60L0 60").attr({fill:"#F7F4EA"}),
ext         = s.path('M0 20L100 20M100 80L0 80').attr({strokeWidth: 4,stroke:"#DFBA68"}),
clicked     = 0;

s.click(function(){
if (clicked == 0){
mid.animate({d:"M0 5L55 50L55 50L0 95"},700,mina.bounce);
ext.animate({d:"M40 5L90 51.15M90 48.85L40 95"},700,mina.bounce);
clicked=1;
}  
else {
mid.animate({d:"M0 40L100 40L100 60L0 60"},700,mina.bounce);
ext.animate({d:"M0 20L100 20M100 80L0 80"},700,mina.bounce);
clicked=0;
}
});
html{height:100%;}
body{min-height:100%; background-color:#252626;text-align:center;}
svg{margin-top:10%;width:50%;}

Menu states:

State 1 goes to:::

State 2

Due to the nature of my website, I was thinking of an animation showing these two states. I have no problem making the images but need help with the javascript coding.

State 3 goes to:::

State 4

My website landing page is here: website main

I've gotten suggestions such as "hire a web design agency" which is actually not useful. I'm considering a bounty for this question as I'd really like to get it done and there are absolutely no examples to be found anywhere where on SO or on CodePen with clear coding.

A good answer posted here can be used by everybody to develop their own menu animations.

For reference, a CodePen with 4 interesting Options + the HTML, CSS, & javascript listed is below. I may try to use this one. CodePen of Tamino Martinius

Nicholas Bourbaki
  • 101
  • 11

1 Answers1

0

If you go to the gear icon on the JavaScript section of the CodePen, you'll see it uses a Snap library.

https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js
Apparently also found at http://snapsvg.io/

You could probably do the same thing with a standard div, instead of using the library, and using a mouseover event to trigger the animation. This might better prompt people to click the icon. HTML5 and CSS3 have some animation features built into it, but I haven't worked with them enough to know how exactly to make this work.

Here's a random page of examples I found that might help you with this. Examples 9 and 17 might be what you're looking for. I didn't skim any further than 20, so there might be others. Number 14 might also help, but I didn't see how to run/view the example they gave.

https://freshdesignweb.com/examples-html5-animation/

computercarguy
  • 2,173
  • 1
  • 13
  • 27