Streaming live at 10am (PST)

Animated hamburger menu and work in progress sandbox

Now then forum.

A while back I commented on a topic created by @Infimorus about a sweet navbar on this site http://www.borngroup.com/ and whether it was possible in Webflow. What caught my eye in the nav was the transforming menu icon, I loved the transition between hamburger and close, and it got me thinking whether it would be possible in Webflow. I’d found this page http://www.transformicons.com/ of usable animations, but decided to have a crack and recreating one in WF.

So, I managed to create a simple transforming hamburger icon just using divs and interactions, here’s the share link to my (work in progress!) sandbox https://preview.webflow.com/preview/jamies-sandbox?preview=ea55af4089d3e54ade776ed93a60b88d . The hamburger is the second section down. If anyone would like access to the sandbox I’ll make it cloneable, the only thing is I use a bit of a haphazard workflow sometimes so it might be quite hard to use! haha apologies in advance.

I’m hoping to create some more experiments based on my own ideas and recreating stuff I’ve seen online, will be sure to share with you peeps as and when I get them done!

Ta ra for now and happy Webflowing.
Jamie

9 Likes

This is awesome @jamiesamman992. @Revolution was incredibly helpful in sharing his recreation of the spanning picture tiles and sharing his work.

This exercise really opened my eyes to the power of interactions. @Revolution work was a great tutorial for me.

Thank you both for your follow ups and great work!

Cheers

1 Like

Nice work @jamiesamman992 :smile: keep up the great work!
You can do many things with interactions in Webflow :smile: even on the micro interaction level :smile:

I’ve found that the cleanest interactions for menus can be achieved by using drop downs and the drop down open/close interactions :slight_smile:
http://jelly-donut-menu-concept.webflow.io
Working on this fun one and many more. :smile:
This one inspired by a concept created in After effects: https://dribbble.com/shots/1956586-Filter-Menu

I love seeing everyone get inspired and collaborating to make their ideas come to life in Webflow :slight_smile:

I’m trying to show the Dribbble crowd what they can create in Webflow :smile:

Go make something awesome! :smile:

Waldo :grinning:

3 Likes

I love the hamburger build interaction! Looks awesome @jamiesamman992 :smile:

1 Like

No problem man! I had a peek at @Revolution 's stuff as well, blew my mind!

Share whatever you get up to, I’d love to see some more of your stuff! :smiley:

Ta,
Jamie

Holy hell @Waldo that jelly donut menu is the bomb! Love it, it genuinely looks like you used AE to do it eventhough it’s all Webflow - the bounces and movements are so smooth. Amazing work fella.

Yeah I agree WF is fantastic for micro interactions as well as bigger scale stuff, it’s got such a range of potential.

Keep up the good work :smiley:
Cheers,
Jamie

@jamiesamman992 I was trying to exactly that whit in webflow, tried really hard =) didn’t manage. Great work! Must have a closer look on how you pulled it off.

Cheers @jorn ! Aye have a look, hope it helps.

Ta,
Jamie

1 Like

Haha thanks @jamiesamman992 :smile:
I have a goal of showing the world and folks on Dribbble what is possible with Webflow :smile: to convert them to using Webflow instead :smile:

It’s all about the micro interactions, scales & rotations to get smooth interactions :slight_smile:

Have fun and keep up the awesome work :slight_smile:

Thank you,
Waldo :smile:

Glad I could help @jamiesamman992.

Here’s the project he’s referring to:

http://born.webflow.io

@Waldo - that jelly donut is nice. I may have to borrow it :smile:

1 Like

Just a lot of interactions, tiny diva and styling added to a drop down widget :smile: @Revolution have at it! :smile: I’ll make it a public Webflow project later today and post the link for those curious as to how it was done.

3 Likes

Any chance you made a public webflow project showing the community how you did the jelly menu?

Cheers!

Sure thing @jashsak https://preview.webflow.com/preview/jelly-donut-menu-concept?preview=99e824f71b46658859dcd3d026c4ddc6 :smiley:

Cheers @Waldo - Unfortunately, I’m getting a 404 page not found for that link.

@jashsak I just updated the link above, my apologies! Should be working now.

Hi I am digging and digging through your preview…can’t see how the animation is triggered? There seems to be no interactions applied to any element that i can see. Can you guide me in how the animation was applied?

edit: Ok I’m starting to see that the animation is applied to “pop out menu” but it is hella complicated…can’t wrap my brain around how this works. Maybe one day you can show tutorial video or something?

1 Like

@DFerroF1 glad you found that :slight_smile: yep it’s all a set of animations that occur on the open/close trigger of the dropdown element. You can do some pretty fun animations with those. :smiley:

You may find this tutorial helpful on making custom hamburger animations: https://webflow.com/blog/how-to-customize-your-hamburger-menu-in-webflow

1 Like