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 Webflow - Jamie's Sandbox . 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!
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.
@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.
Haha thanks @jamiesamman992
I have a goal of showing the world and folks on Dribbble what is possible with Webflow to convert them to using Webflow instead
It’s all about the micro interactions, scales & rotations to get smooth interactions
Just a lot of interactions, tiny diva and styling added to a drop down widget @Revolution have at it! I’ll make it a public Webflow project later today and post the link for those curious as to how it was done.
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?
@DFerroF1 glad you found that 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.
keep up the great work!
