Navigation motion patterns

One section opens as the previous one closes, both heights easing over the same beat so the list never jumps.

Jumping to a section briefly washes its background so the eye lands in the right place.

A return control lifts into the corner once the reader is deep enough for it to matter.

A sheet rises from the bottom edge over a dimming backdrop and settles once.

Going one level deeper slides a new crumb in from the right while the trail behind it recedes.

Slides advance with the neighbours peeking, dots tracking position.

The palette drops a short distance into place with its results already filtering as it lands.

The menu grows out of the point you pressed, from whichever corner keeps it on the surface.

Closing a detail view returns the tile to the exact row it came from.

A side drawer travels in over the page, and the page eases back a little to hand it the foreground.

A menu unfolds from the corner of the control that opened it, with its items arriving a frame apart.

A compact card that expands in place into a detail view — image and title travel continuously.

The round action button opens into a labelled list of actions that climb out of it, nearest first.

A panel expands to fill the frame while surrounding chrome fades.

The pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.

A hamburger becomes a close glyph as a full-screen menu wipes in with staggered links.

A dialog grows the last few percent into place behind a darkening scrim, and leaves the same way.

A submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.

The current rows leave in the direction you asked for and the next set arrives from the opposite side.

A popover opens below its trigger, or flips above when space runs out — the arrow follows.

A top-edge bar advances during navigation and completes with a quick finish.

A hairline on the top edge tracks how far through a long article the reader has come.

A filled pill travels to the segment you picked, and each label inverts as it passes underneath.

A navigation rail narrows to icons, with labels leaving before the width closes so text is never squeezed.

Dragging the divider resizes both panes live, and releasing it settles the split on the nearest stop.

A new screen arrives over the current one, which holds back and dims to signal depth.

The display title scrolls away and a compact bar takes over, gaining its surface and rule on the way.

An edge drag peels the top page away under your finger and snaps to whichever side the gesture was heading for.

The chosen icon fills and lifts while its label brightens, and the icon you left releases.

The active-tab underline travels to the tab you picked instead of blinking out and back.

A folder's chevron turns as its children unfold with a small stagger.

The rail fills toward the step you are entering while the panel travels the way you sent it.