WebDev For You - Daily Interaction #82
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.
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.