Animation & Motion · Creator Design System

Motion basics

Four durations, four easings. No component may invent a duration. Entrances travel 16px, not 60 — long travel reads as "loading", which is a lie when the content is already there.

hover the bottom row

fx-rise

entrance · 320

fx-fade

entrance · 320

fx-slide-l

entrance · 320

fx-scale

entrance · 320

fx-blur

entrance · 560

fx-clip

scene · 560

fx-lift

hover

fx-glow

hover

fx-tilt

hover

fx-shift→

--dur-1 120 state flips · --dur-2 200 default · --dur-3 320 entrances · --dur-4 560 scenes

the rest of the ladder

fx-flip

reveal · 560

fx-swing

confirm · 560

fx-pop

spring · 320

fx-draw

fx-mask

wipe · 560

fx-zoom

hero · 560

.fx-flip .fx-swing .fx-pop .fx-draw .fx-mask .fx-zoom — thirteen behaviours total, each with exactly one job