WebDev For You - Daily Interaction #82

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/