UI Animations: Stagger, Spring, Shared Element

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

Inbox

Sent

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

Share with

Team

Design

Engineering

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

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

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

animation-timeline: scroll()

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

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

Spring

Linear

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

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

startViewTransition()

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