1369

Family Buttons Icons Morph Between Sheet Screen Transition

Family Buttons Icons Morph Between Sheet Screen Transition

This interaction showcases a highly polished screen transition within the Family app's wallet setup flow. When the user taps the 'New Group' option and confirms via the bottom sheet, the app transitions to the 'Name Your Wallet' screen. The transition is anchored by a shared-element morph: the plus icon inside a dashed circle from the list row smoothly scales, moves, and transforms into a larger plus icon inside a dashed square in the center of the new screen. Simultaneously, the top-left close button ('X') morphs into a back arrow ('<'), the header text crossfades, and the system keyboard slides up from the bottom. Tapping the back button reverses this entire sequence with matching spring physics, returning the icon to its list-row origin.