Spatial consistency and fluid morphing
Motion can tell you where something lives. Rauno Freiberg’s example in Invisible Details of Interaction Design is the Dynamic Island. Tap it and the app slides out from under the Island to cover the screen. But if the Island is expanded, which says your intent is to receive more detail, the app launches from its icon if the icon is visible, and otherwise slides in from the right.
Direction carries information#
Launching Spotify from its icon makes it clearer where the audio is playing from: with three music apps on one row, the motion ties the player to its source. Sliding in from the right says the app lives in the App Switcher, and right rather than left says it is now first on the stack. This is spatial consistency: the direction an element arrives from matches where it came from.
The exception proves it. The Clock app always jumps out from the Island, even when expanded, because its timer module belongs to one app and there is nothing to disambiguate. Emil Kowalski gives the web version in You Don’t Need Animations: Sonner’s toast enters from the direction it later leaves in, and that consistency makes swipe-down-to-dismiss feel intuitive. In code it is a mounted flag and a transition from below.
.sonner-toast { transition: transform 400ms ease;}[data-mounted="true"] { transform: translateY(0);}[data-mounted="false"] { transform: translateY(100%);}Fluid morphing and the 10 point crop#
Swiping up morphs the full screen app into its icon, which Rauno calls fluid morphing. The icon is intentionally stretched from the bottom to fill the frame as the shape goes from tall rectangle to square.
That assumes icons follow Apple’s guidelines. The Bluesky icon ignores the safe zone, so its bottom roughly 10 points are cropped, duplicated, and stretched into a strange repeating image. A system motion decision leaks into every third-party asset.
Figure 3 shows the principle on the web: a compose pill that either grows into a panel or is replaced by it. In Morph mode your eye never loses the element, the object permanence Rauno names as a reason to animate at all. In Cut mode the panel simply appears.
Motion that says a layer still works#
A year later, in Designing Depth (July 2024), Rauno shows motion telling you what a surface still does. On iPadOS, swiping right on the Home Screen opens the Today View as a full screen overlay and the Dock slides out of view, not blurred but keeping its opacity, which says it retains interactivity and can be swiped back. Moving it respects your intent to use the surface you swiped for.
His check that this is deliberate: Control Centre is also a full screen overlay, and there the Dock is blurred with the Home Screen while the Home Bar surfaces above as its own layer to indicate dismissability. Same Dock, two treatments, each matched to what you can do next, and the sliding one reinforces the stacked layers metaphor from the first section of this chapter.
Before an element appears, decide where it is coming from and make the motion say so. A panel that lives inside a button grows from that button; a sheet that leaves downward arrives from below. An element that stays interactive while something covers it should behave like its own layer, by sliding or keeping its opacity, rather than blurring with the rest.