Streaming live at 10am (PST)

Simple menu animation

Hi!

I’ve been recently playing with interactions and made this little animation with some divs and stuff. I’m new in Webflow, so all the feedback are appreciated!

Preview link: https://preview.webflow.com/preview/simple-menu-animation?preview=02f76084acdc4b23d86e6cd1317b6477

thanks for reading :smile:

5 Likes

Nice work @FriedFish! :smiley: Keep it up and keep sharing your Webflow creations, I love the menu open/close interaction :wink:

Really nice @FriedFish :grinning:

Thank you both! @Sam_G @Waldo

1 Like

Very nice, been wondering if that is possible

Hey looks really nice. Might be a dumb question but the 3 horizontal lines…how did you create them? I noticed they look
different then the standard 3 that appear in the nav bar. Thanks!

Thanks! :smiley:

The horizontal lines are three div blocks, each one animated differently. You should delete the default menu icon and then fill the menu button with 3 similar div blocks in order to get something similar as the example.

Try it out!

1 Like

Div blocks! Of course. Thanks for the response.

Wow, this is such a nice effect and I’m surprised at how simple the interaction is. For some reason I’ve always assumed animations like this are more difficult to utlize.

Thanks for showing this off @FriedFish I’ll definitely be using a similar technique for my personal portfolio.