Beautiful Hamburger menu button transition animation example. Onclick find the beautiful smooth animation.
Developed by Aaron Iker and created using HTML, CSS(SCSS) and JavaScript. Created on December 11, 2019 Updated on December 13, 2019
Find the demo and code below
See the Pen Menu Animation by Aaron Iker (@aaroniker) on CodePen.
HTML
<button class="menu">
<svg viewBox="0 0 64 48">
<path d="M19,15 L45,15 C70,15 58,-2 49.0177126,7 L19,37"></path>
<path d="M19,24 L45,24 C61.2371586,24 57,49 41,33 L32,24"></path>
<path d="M45,33 L19,33 C-8,33 6,-2 22,14 L45,37"></path>
</svg>
</button>
<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/9020776-Menu-animation" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>SCSS
.menu {
--color: #fff;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
outline: none;
position: relative;
border: none;
background: none;
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
svg {
width: 64px;
height: 48px;
top: -6px;
left: -14px;
stroke: var(--color);
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
display: block;
position: absolute;
path {
transition: stroke-dasharray var(--duration, .85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, .85s) var(--easing, ease) var(--delay, 0s);
stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
stroke-dashoffset: var(--offset, 126px);
transform: translateZ(0);
&:nth-child(2) {
--duration: .7s;
--easing: ease-in;
--offset: 100px;
--array-2: 74px;
}
&:nth-child(3) {
--offset: 133px;
--array-2: 107px;
}
}
}
&.active {
svg {
path {
--offset: 57px;
&:nth-child(1),
&:nth-child(3) {
--delay: .15s;
--easing: cubic-bezier(.2, .4, .2, 1.1);
}
&:nth-child(2) {
--duration: .4s;
--offset: 2px;
--array-1: 1px;
}
&:nth-child(3) {
--offset: 58px;
}
}
}
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// dribbble & twitter
body {
min-height: 100vh;
font-family: 'Roboto', Arial;
display: flex;
justify-content: center;
align-items: center;
background: #275EFE;
font-family: 'Roboto', Arial, sans-serif;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
width: 76px;
}
}
.twitter {
position: fixed;
display: block;
right: 112px;
bottom: 14px;
svg {
width: 24px;
height: 24px;
fill: white;
}
}
}Find Compiled CSS
.menu {
--color: #fff;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
outline: none;
position: relative;
border: none;
background: none;
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
}
.menu svg {
width: 64px;
height: 48px;
top: -6px;
left: -14px;
stroke: var(--color);
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
display: block;
position: absolute;
}
.menu svg path {
transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
stroke-dashoffset: var(--offset, 126px);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.menu svg path:nth-child(2) {
--duration: .7s;
--easing: ease-in;
--offset: 100px;
--array-2: 74px;
}
.menu svg path:nth-child(3) {
--offset: 133px;
--array-2: 107px;
}
.menu.active svg path {
--offset: 57px;
}
.menu.active svg path:nth-child(1), .menu.active svg path:nth-child(3) {
--delay: .15s;
--easing: cubic-bezier(.2, .4, .2, 1.1);
}
.menu.active svg path:nth-child(2) {
--duration: .4s;
--offset: 2px;
--array-1: 1px;
}
.menu.active svg path:nth-child(3) {
--offset: 58px;
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
font-family: 'Roboto', Arial;
display: flex;
justify-content: center;
align-items: center;
background: #275EFE;
font-family: 'Roboto', Arial, sans-serif;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
width: 76px;
}
body .twitter {
position: fixed;
display: block;
right: 112px;
bottom: 14px;
}
body .twitter svg {
width: 24px;
height: 24px;
fill: white;
}
JavaScript
document.querySelectorAll('.menu').forEach(btn => {
btn.addEventListener('click', e => {
btn.classList.toggle('active');
});
});
