LoginGet started — it’s free
Made in Webflow

WebDev For You - Daily Interaction #82

Clone in Webflow190
WebDev For You's avatar
by WebDev For You
1.1k
site profile thumbnail

Description

Welcome to daily interaction #82. This demo showcases a fullscreen menu animation on click. This one was fun! It’s mostly comprised of 3 different components inside of a menu wrapper. Those are the: 1. Image wrapper with an image inside of it 2. Blue background 3. Right wrapper with menu items inside of it The image wrapper and right wrapper are both 50% width within the menu. I set the width of the blue background to 150% so it has a quicker animation as it scales. By having these wrappers as separate components inside of the menu wrapper I was able to apply a scale effect to the image, a scale effect to the blue background, and animations to the menu items. The menu trigger also turns into a close icon on click, and then back to a 3 line menu trigger :). This menu was inspired by this website here: https://adans.jp/

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.
webdevforyouwebflowdailyinteractioninteractionsfullscreen menumenumenutriggermenuconceptclickhover effectshover

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8
191
926
© 2022 Webflow, Inc. All rights reserved.