Simple menu animation

Community resources Show & Tell
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:

5 Likes
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

1 Like
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!

1 Like
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.