UI Terms visual dictionary

Animations

Motion between states. Push, fade, stagger, spring, shared element.

Container transform

A motion where one element morphs into a new view, preserving its identity as it grows.

Inbox
Sent

Crossfade

A transition where one element fades out as another fades in, the two briefly overlapping in opacity.

Share with
Team
Design
Engineering

Modal presentation

A transition where a new view slides up over the current view to present a self-contained task.

Parallax scroll

An effect where layers on a page move at different speeds during scroll, creating a sense of depth.

Push transition

A transition where a new view slides in from the side, pushing the current view off-screen.

animation-timeline: scroll()

Scroll-driven animation

An animation whose progress is tied to scroll position rather than time, advancing as the user scrolls.

Shared element transition

A transition where an element persists visually across two views, moving from its position in one to its position in the next.

Spring
Linear

Spring easing

An animation curve based on the physics of a spring rather than a fixed cubic-bezier function.

Stagger

An animation pattern where a group of elements animates one after another with a small delay between each.

startViewTransition()

View transition

A browser-native transition between two states of a page, where the browser animates the difference automatically.