The first motion a user sees on any view is content entering. WCN reveals it calmly — a short fade-up as elements scroll into view, choreographed so a page assembles rather than flickers.

MOTIONFade + rise DISTANCEShort · tokened TRIGGEROn scroll into view ORDERReading order

C01.1 · FADE-UP

Rise a little.

Elements enter with a small upward translate and a fade — a short, eased move of a token distance. The rise suggests content settling into place from just below.

C01.2 · ON SCROLL

Reveal as you reach it.

Sections reveal as they scroll into view, once. The effect rewards scrolling without hijacking it — no pinning, no scroll-jacking, just content arriving as you reach it.

C01.3 · CHOREOGRAPHY

Assemble, don’t flicker.

Within a section, elements stagger in reading order so the view assembles top-to-bottom. The page composes itself; it never flickers in all at once.

C01.4 · RESTRAINT

Once is enough.

Entry animation plays once and never loops as the user scrolls back and forth. With reduced-motion set, content simply appears — the page is fully usable without any entrance at all.

Moving between routes is where motion most often breaks — a white flash, a jump to the top, a lost sense of place. WCN route transitions keep persistent chrome still and carry direction.

CHROMENav persists DIRECTIONForward / back FLASHNone SCROLLRestored

C02.1 · PERSISTENT CHROME

Nav stays put.

Navigation, headers and persistent panels don't re-render between routes — only the content area transitions. Keeping the frame still makes the app feel like one place, not a slideshow.

C02.2 · DIRECTION

Forward and back.

Going deeper slides content in from the trailing edge; going back reverses it. The direction of motion matches the direction of navigation, so the user always knows which way they moved.

C02.3 · NO FLASH

Never a white blink.

The outgoing view holds until the incoming one is ready, so there is never a flash of empty background. Transitions cover loading rather than exposing it.

C02.4 · SCROLL RESTORE

Back to where you were.

Returning to a previous route restores its scroll position, so the user lands where they left rather than at the top. Continuity of place includes continuity of position.

Lists and grids are where data changes most — items added, filtered, sorted, reordered. WCN animates those changes so the user can track what moved instead of re-scanning a reshuffled set.

REVEALStaggered FILTERAnimated REORDERItems glide CAPStagger limit

C03.1 · REVEAL

Staggered in.

When a list first loads, items stagger in on the 60 ms interval in reading order. The stagger caps after a handful so long lists never crawl in one row at a time.

C03.2 · FILTER & SORT

Show what moved.

When a filter or sort changes the set, remaining items glide to their new positions while removed items fade out. The user sees the transformation, not a sudden new arrangement.

C03.3 · REORDER

Items slide.

Drag-reorder and programmatic moves animate the affected rows sliding past each other. The moved item stays under the cursor; its neighbours make room with a smooth shift.

C03.4 · RESTRAINT

Quick, then done.

List motion is brief — these transitions happen often, so they must be fast and never block interaction. A list the user is actively working should feel instant, with motion only smoothing the edges.

Modals, drawers, popovers and tooltips live above the content, and motion is how the user understands that stacking. WCN brings them in from where they belong, over a backdrop that sets them apart.

MODALScale + fade in DRAWERSlide from edge POPOVERFrom origin BACKDROPDim behind

C04.1 · MODALS

Rise to the front.

A modal scales up slightly and fades in over a dimmed backdrop, centring attention. It feels like it rises to the front of the space rather than appearing flatly on top.

C04.2 · DRAWERS

Slide from the edge.

Drawers enter from the edge they're anchored to — right, left or bottom — so their motion declares where they live. They push nothing; they overlay, with the page dimmed behind.

C04.3 · POPOVERS

From their trigger.

Popovers and tooltips scale out from the control that opened them, keeping the connection visible. They're quick and light — small overlays don't need the weight of a modal.

C04.4 · BACKDROP

Dim, don’t black.

The backdrop fades to a partial dim, not full black, so context stays visible behind the overlay. Tapping it dismisses; the dim is the affordance that says "this is temporary".

The most advanced transition is the morph — an element that transforms into its next form rather than being replaced. Done well it is the clearest motion in the system; done casually it is the most expensive.

SHAREDElement morphs EXPANDFrom origin THUMB→ detail USESparingly

C05.1 · SHARED ELEMENT

The same object.

When an element exists in two views — a thumbnail and a full image, a card and a detail — it morphs between them. The user perceives one continuous object, not a swap of two.

C05.2 · EXPAND

Grow from where tapped.

A detail view can expand from the exact element that opened it, growing to fill the screen. Closing reverses it back into the same spot, preserving a perfect sense of origin.

C05.3 · WHEN TO USE

For the hero move.

Morphs are reserved for the one or two most important transitions in a flow — opening a key item, not every list tap. Overused, they slow everything and lose their impact.

C05.4 · COST

Expensive, so careful.

Morphs require matching elements across views and careful performance work to stay at 60fps. They're built deliberately, tested on real devices, and dropped to a simple fade if they can't stay smooth.

Continuity is the thread that ties all transitions together — the promise that the user never loses their place. It's less a single technique than the discipline of making every change feel connected.

CUTSNone jarring SCROLLRestored SPATIALConsistent STATEPreserved

C06.1 · NO HARD CUTS

Bridge every change.

No state change happens as an instant cut — there is always a brief connecting motion, however small. The cut is the one transition WCN never uses, because it loses the user's place.

C06.2 · SPATIAL MODEL

A stable geography.

The interface has a consistent geography — back is left, deeper is right, overlays are up. Every transition obeys it, so the user builds an accurate map and never feels disoriented.

C06.3 · STATE PRESERVED

Pick up where you left.

Scroll positions, form input, expanded sections — state survives a transition wherever possible. Returning to a view feels like returning to a place you left, not rebuilding it from scratch.

C06.4 · THE THREAD

One continuous experience.

Continuity is the sum of every other transition rule working together. When it holds, the product feels like a single continuous surface the user moves around — calm, oriented, and trustworthy.