‍

In the world of web design, it’s the little things that often bring a project from good to great. A subtle animation, a slight bounce, a color change — these minor tweaks can bring a level of polish that sets your site apart from the rest. One such element that’s both functional and visually delightful is the hamburger icon, used widely as a navigation menu toggle.

I recently stumbled upon an animated hamburger icon by Mikael Ainalem on CodePen, which transitions smoothly to a close icon when clicked. The simple yet captivating animation caught my eye, and I thought it would be an excellent addition to a Webflow project I was working on. The original animation can be found here, and I highly recommend checking it out.

Eager to incorporate this animated icon into my Webflow project, I started by extracting the necessary HTML and CSS from Ainalem’s CodePen example. The SVG paths create the hamburger icon, and a bit of CSS magic transitions it to a close icon upon a click. However, to fit it seamlessly into Webflow, a few tweaks were needed.

‍

Bringing the Animation to Webflow

Webflow is a fantastic platform that allows for visual web design, but every so often, you need to dive into some custom code to get things just right. Here’s how I brought the animated hamburger to my Webflow project:

1. Embed Widget: First, I created an Embed widget in Webflow where I wanted my hamburger icon.
2. HTML: Pasted the HTML code from Ainalem’s example into the Embed widget.
3. CSS: Added the CSS to the project’s Custom Code Head section to style the icon and manage the animation.

‍

HTML (Embed Widget in Webflow)

<button class="menu" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">
  <svg width="24" height="24" viewBox="0 0 100 100">
    <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
    <path class="line line2" d="M 20,50 H 80" />
    <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
  </svg>
</button>

‍

CSS (Custom Code Head in Webflow)

<style>
.menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}
.line {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

‍

Customizing the Icon

The beauty of this setup is the ease with which you can customize the icon to fit your project’s theme:

• Icon Size: Adjust the width and height attributes in the svg tag to tweak the icon size.
• Background Color: Change the background-color property in the .menu class to alter the background color.
• Icon Color: The currentColor value for the stroke property allows the icon color to match the current font color set in Webflow. Change the font color in Webflow's typography settings or replace currentColor with a specific color code in the CSS.

‍

Result

‍

Final Thoughts

With a bit of custom code and a dash of creativity, you can bring a new level of polish to your Webflow project. The animated hamburger icon by Mikael Ainalem is just one of many small details that, when added thoughtfully, can elevate the user experience on your website.

So the next time you find a cool animation or element you’d like to incorporate into your Webflow project, don’t hesitate to dive into the code. With a little tweaking, you can make it your own and bring a unique flair to your website’s design.