Streaming live at 10am (PST)

Simple menu animation


#1

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:


#2

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


#3

Really nice @FriedFish :grinning:


#4

Thank you both! @Sam_G @Waldo


#5

Very nice, been wondering if that is possible


#6

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!


#7

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!


#8

Div blocks! Of course. Thanks for the response.


#9

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.


#10