How to Create a Lottie Hamburger Menu Animation in Webflow

Based on the YouTube Video by Magnaem for Memberstack

TL;DR: Download a hamburger menu animation from lottiefiles.com, import it into Webflow as a Lottie asset, and swap it in for your existing menu icon. Set up a GSAP click interaction that plays the animation to 50 percent on the first click and reverses on the second, creating a smooth hamburger to X transition. Apply the interaction across all pages and test it in preview.

What You Are Building

A hamburger menu icon that animates into an X when clicked and reverses back to the hamburger when clicked again, using a Lottie animation and Webflow's GSAP Interactions. This is particularly useful for Webflow template creators, since Webflow has made GSAP the standard for animations.

What You Need

• A free account at lottiefiles.com
• A Webflow project with a navbar

Step by Step

1. Download a Lottie hamburger menu animation. Go to lottiefiles.com, search for "hamburger menu," find an animation you like, click "Download as," choose Lottie JSON, and download the file.

2. Import into Webflow. Open your Webflow project, go to Assets, and drag in the Lottie JSON file you just downloaded.

3. Switch to tablet view. This lets you see your mobile menu icons while you work.

4. Replace your existing menu icon. Inside your menu icon wrapper (where your top, middle, and bottom hamburger lines typically live), delete those elements. Then drag in a Lottie animation element from the elements panel and replace it with the Lottie file you uploaded to Assets.

5. Set up the click interaction. Select the wrapper above your Lottie animation element. Go to the Interactions panel and choose Interactions with GSAP. Set the trigger to Click. Under click settings, set it to "on each click." Under control, set it to "toggle play reverse."

6. Add the play action. With the Lottie animation element selected, add an action and choose "Play Lottie." Set the following values:

• Duration: 0.5 seconds
• Ease: Linear
• From: 0%
• To: 50%

This tells the animation to play to the halfway point (the X state) on the first click, then reverse back to the hamburger state on the second click.

7. Set it to run on all pages. Since this is your navbar, the interaction needs to run across your entire site. Set it to apply to all pages.

8. Test it. Open your navbar in preview mode. Clicking the icon should animate it from the hamburger to the X. Clicking again should reverse it back. If both directions work, the interaction is set up correctly.

9. Rename your interaction. Give your interaction a descriptive name so you can tell it apart from other GSAP interactions in your project.

That Is It

Nine steps, no custom code, and your hamburger menu now has a polished Lottie animation that plays and reverses on click using Webflow's GSAP Interactions. A small detail that makes a noticeable difference in how professional mobile navigation feels.

FAQ

Do I need to know how to code for this?

No. The entire process uses Webflow's built in GSAP Interactions panel. No custom code is required.

Where do I find Lottie hamburger menu animations?

Lottiefiles.com has a searchable library. Search for "hamburger menu" and choose an animation you like, then download it as a Lottie JSON file.

Why does the Play Lottie action go from 0% to 50%?

The animation file contains the full hamburger to X transition in one sequence. Playing from 0 to 50 percent shows only the first half, which is the hamburger turning into an X. Toggling play reverse handles the return trip back to the hamburger on the second click.

Why do I need to switch to tablet view while setting this up?

Menu icons are often hidden at desktop breakpoints since they only appear in the mobile or tablet nav menu. Switching to tablet view lets you see and edit them directly.

Does this work on every page of my site?

Yes, as long as you set the interaction to run on all pages, since the navbar and its menu icon typically appear site wide.