Made in Webflow
WebDev For You - Daily Interaction #88
Description
Welcome to daily interaction #88.
This demo showcases a menu trigger animation on click. When you first click the menu trigger, the lines rotate clockwise and then the lines turn into an 'x' indicating that you can then close the menu. On the second click the 'x' stays in its current position and just returns to a 3 line horizontal menu trigger. On second click the menu trigger actually rotates back but it's not noticeable because the duration is set to 0 and the easing is set to linear.
This demo was inspired by these hamburger icon animations here: https://codepen.io/carlosriera/pen/qNgAEo/
To view more daily interactions and premium content visit: https://www.webdevforyou.com/
Feeling inspired?
If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.We miss comments too!Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!
As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.
Share your feedback