Curtain transition

Motion timing

The classic animation trick.

Ease in · ease out
MotionTime

Slow in, slow out.

Think about how a car pulls away from a stop — it gathers speed before it moves, and sheds it before it settles. Constant-speed motion reads as mechanical. Eased motion reads as alive.

Linear — evenly spaced, feels robotic
Ease in · ease out — clustered at the ends, feels considered

We put this curve on almost everything that moves on screen. It's a two-line CSS change that separates an interface that feels considered from one that feels robotic.

06

OFFSET
& DELAY

A slight delay between two or more elements creates softness and multi-layered movement. It also directs attention — signaling an element's place in the hierarchy, not just that it moved.

Implementation examples

Built in stages, not all at once.

Results · Streaming

Results stream in as they resolve, rather than all landing at once when the slowest of them finishes.

View
Calendar · Cascade

Cascading a change through a calendar with a beat between rows makes the update legible rather than invisible.

View
Checkout · Progress

Revealing steps progressively keeps someone oriented in a flow that would otherwise feel open-ended.

View
Reporting · Sequence

Sections populate in sequence as each stage completes, so progress shows without a spinner standing in for it.

View
Get in touch

Want this level of care on your product?

Two motion patterns down. There are a few more on the Craft page — or skip straight to telling us what you're building.

Start a project →Next: live vs. deferred response →Back to Craft