1365

Family Button to Sheet Button Morph Interaction

Family Button to Sheet Button Morph Interaction

When the user taps the primary Continue button, the button itself expands and morphs into a bottom sheet modal dialog. The button's shape and label transition smoothly into the modal's layout, where the Continue button relocates to the bottom-right of the sheet, and other elements like the warning icon, text, and Cancel button fade and slide into place. Tapping Cancel reverses this morphing animation, collapsing the entire bottom sheet back down into the single Continue button with spring physics.