Introduction
I started out by using react-svg-morph in my personal website, to animate my icon, specifically menu icon. Unfortunately, react-svg-morph is not maintained (5 years and counting) meaning it still uses some outdated peer dependencies and more importantly, it's not worth its size in kb (since I'm only using it for one thing!).
So I decided to create a my own hamburger menu icon and the answer is not animating svg, in fact, my approach could not be further from react-svg-morph.
With just a few lines of code, you can easily create a dynamic and eye-catching animation for your website's hamburger icon!
TLDR
Don't have time to read the full article and just want to see the full code, here it is.
HTML
<body>
<main id="main">
<div></div>
<div></div>
<div></div>
</main>
</body>
CSS
main {
cursor: pointer;
}
div {
height: 4px;
width: 40px;
background-color: white;
border-radius: 4px;
margin: 8px 0;
transition: 0.75s linear;
}
.on > div:nth-child(2) {
opacity: 0;
transform: rotate(360deg) scale(0.2);
}
.on > div:first-child {
transform: rotate(45deg) translate(8px, 9px);
}
.on > div:last-child {
transform: rotate(-45deg) translate(8px, -9px);
}
body {
background-color: hsl(180deg 100% 25%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Javascript
const main = document.getElementById("main");
const toggleClass = () => {
main.classList.toggle("on");
};
main.addEventListener("click", toggleClass);
The final product and the code is available on codepen.
Step by Step
For a detailed explanation of the entire process
<main id="main">
<div></div>
<div></div>
<div></div>
</main>
To start, you'll need to create three <div> elements within a <main> container, each representing one of the three strokes in the hamburger icon. To create the strokes, you'll need to define the height, width, and contrasting background color for each of the <div> elements, and add some margin between them.
div {
height: 4px;
width: 40px;
background-color: white;
border-radius: 4px;
margin: 8px 0;
/* Add animation to change in states */
transition: 0.75s linear;
}
Once you have the three strokes in place, it's time to create the animation that will transform the hamburger icon into a close icon. To do this, you'll need to add a new state to your <main> container by adding the class "on" to it.
<main id="main" class="on">
<div></div>
<div></div>
<div></div>
</main>
To create the close icon, you'll need to hide the middle stroke and rotate the other two strokes to form an "X" shape. You can achieve this by using the opacity and transform properties.
.on > div:nth-child(2) {
opacity: 0;
/* Rotate while hiding it */
transform: rotate(360deg) scale(0.2);
}
Subsequently, We need to rotate the other two element to form a close (X) sign
.on > div:first-child {
transform: rotate(45deg) translate(8px, 9px);
}
.on > div:last-child {
transform: rotate(-45deg) translate(8px, -9px);
}
Finally, you'll need to add a toggle function that adds and removes the "on" class from the <main> container when the hamburger icon is clicked.
Remember, all our strokes (<div>) are nested inside main#main. So we can use it to let us
- Know when the icon is clicked
- Know the current state
- Change the current state
Now, we just have to show how we want the second state to look like, that is create a new style for the second state.
const main = document.getElementById("main");
const toggleClass = () => {
main.classList.toggle("on");
};
main.addEventListener("click", toggleClass);
And there you have it - a simple but effective animation that transforms your website's hamburger icon into a close icon with just a few lines of code. If you have any suggestions or feedback, feel free to share them in the comments!
Top comments (0)