Streaming live at 10am (PST)

Animated hamburger menu and work in progress sandbox


#1

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


#2

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


#3

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 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 smile

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

Go make something awesome! smile

Waldo 😀


#4

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


#5

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


#6

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


#7

@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.


#8

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

Ta,
Jamie


#9

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 smile

Have fun and keep up the awesome work smile

Thank you,
Waldo smile


#10

Glad I could help @jamiesamman992.

Here's the project he's referring to:

http://born.webflow.io

https://webflow.com/website/Born-Media-Group


#11

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


#12

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.


#13

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

Cheers!


#14

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


#15

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


#16

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


#17

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?


#18

@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


#19

#20