site profile thumbnail

Description

Welcome to daily interaction #83. This demo showcases a fullscreen menu animation on click. This one was a bit of work :P, but I like the way this menu feels. Could be great for a softer or more elegant website. The reason it took some work is because an animation had to be applied to the menu item name, the underline, and the menu item number. Because the menu items stagger I was not able to apply the animations to class names so I had to individually apply the same animations to each menu item, and then stagger them using the delay option in IX2. It was a bit tedious, but I think the result is worth it :). On the second click though I was able to apply the same animations to child classes of the menu items because I just need to reset the animations, so that part was quick. I just hid and faded out the menu wrapper and then reset all the menu items to their initial states and position. Enjoy πŸ‘. This menu was inspired by: https://moves.basicagency.com/
webdevforyoudailyinteractioninteractionsfullscreen menumenumenutriggermenuconceptclickhover effectshoversticky-items

More sites by WebDev For You

See profile

Related Made in Webflow Projects