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 application slides out from under the Island to cover the screen. But if the Island is expanded, which conceptually tells the system your intent is to receive more detail, the app does not slide out from the Island. It launches from its icon, if the icon is visible. Otherwise it slides in from the right.
Each choice carries information. Launching Spotify from its icon, he reasons, makes it much clearer where the audio is playing from: if you had three music apps on the same row, the motion establishes a relationship between the audio player and its source. Sliding in from the right communicates where the app is spatially, in the App Switcher, and moving in from the right rather than the left signals that the app is now first on the stack of apps in the switcher. This is what he means by spatial consistency: the direction an element arrives from matches the place it actually came from.
The exception proves it. The native Clock app never opens from its icon. It always jumps out from the Island, even when the Island is expanded, because the Island’s timer module is specific to one app and no other app can have the same Island. There is nothing to disambiguate, so there is no need to make clear where it is from. Emil Kowalski gives a web-scale version of the same principle in You Don’t Need Animations: Sonner’s toast enters from the direction it later leaves in, and that consistency is what makes swipe-down-to-dismiss feel intuitive.
Rauno’s next observation is about what happens to an app while it moves. Swiping up morphs the full screen app into its icon, and he calls this fluid morphing. The curious detail is that the icon is intentionally stretched from the bottom to fill the frame as the shape goes from a tall rectangle to a uniform square. That technique assumes app icons follow Apple’s guidelines. The Bluesky icon ignores the recommended safe zone, so the bottom roughly 10 points of it are cropped, duplicated, and stretched, producing a strange repeating image during the morph. A system-level motion decision leaks into every third-party asset, and the asset has to cooperate.
Figure 2 shows the morph principle on the web, with a compose pill that either grows into a panel or is replaced by it. Click Compose in Morph mode and watch the pill become the panel: your eye never loses the element, which is the object permanence Rauno names as a reason to animate at all. Switch to Cut and the panel simply appears. Slow motion shows what the spring is doing to the shape on the way.
A year later, in Designing Depth (July 2024), Rauno returns to the idea from the other side: motion can also tell 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. He points out that the Dock is not blurred along with the Home Screen. It slides off-screen while keeping its opacity, which communicates that it retains interactivity and can be brought back with a swipe. Apple could have left the Dock in place, but because it is layered above the Today View sidebar, moving it out of the way respects your intent to interact with the surface you swiped for. The motion reinforces the stacked layers metaphor from the first section of this chapter.
His check that this is deliberate: Control Centre is also a full screen overlay, and there the Dock shows no properties of a separate layer. It is blurred along with the Home Screen, and the Home Bar is surfaced above as its own layer to indicate dismissability. Same Dock, two overlays, two treatments, each matched to what you can do next.
What to take into your own work: before an element appears, decide where it is coming from and make the motion say so. A panel that is conceptually inside a button should grow from that button, not fade in at the centre of the screen. A sheet that leaves downward should arrive from below. And when an element stays interactive while something covers it, let it behave like its own layer, by sliding or by keeping its opacity, rather than blurring it with the rest.