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/