Avara Product Tap Scale Sheet Info Transition

Avara Product Tap Scale Sheet Info Transition

On the Avara mobile website grid, tapping any of the four brand/product sticker icons triggers a fluid focus transition. The selected icon scales up and smoothly repositions to the top-center of the screen, while the remaining grid elements crossfade out. Simultaneously, a dark modal bottom sheet slides up from the base displaying product information and a close button. Dismissing the modal reverses the animation, springing the icon back into its grid position as the sheet slides away.