Enter by importance
Content enters first, controls last, even when the controls sit higher.
Emil Kowalski@emilkowalskiThere's no right or wrong when it comes to intro animations, but the way we did this at Linear is we animate based on importance. h1 → description → product → changelog Changelog sits higher on the page than the product demo, but it's less important, so it comes in later.
Shown in Demo 1: the changelog pill sits above the product and still arrives after it. Rebuild the order yourself in Demo 3.
Emil Kowalski@emilkowalskiSame goes for this onboarding screen from animations.dev. The UI controls are least important, so they come in last even when they sit higher on the page.
Shown in Demo 2: step dots, Skip and close sit on top of the card and arrive last.
From emil-design-eng, “Stagger Animations”.
Hero: position vs importance
Replay with slow motion on and watch the changelog pill.
Top to bottomPosition
delay = position × staggerBy importanceGood
delay = rank × stagger@keyframes enter {
from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
}
.hero > * {
animation: enter 300ms var(--ease-out) both;
animation-delay: calc(var(--rank) * 50ms);
}
.hero h1 { --rank: 0; }
.hero .lede { --rank: 1; }
.hero .product { --rank: 2; }
.hero .changelog { --rank: 3; }Onboarding: controls last
Replay and watch the step dots, Skip and close.
Top to bottomPosition
By importanceGood
.modal { animation: pop 250ms var(--ease-out) both; }
.modal > * {
animation: enter 300ms var(--ease-out) both;
animation-delay: calc(80ms + var(--rank) * 50ms);
}
.modal .title { --rank: 0; }
.modal .body { --rank: 1; }
.modal .preview { --rank: 2; }
.modal .cta { --rank: 3; }
.modal .controls { --rank: 4; }Rank it yourself
Reorder the rows, then press Replay.
Entrance order
PreviewYours
Why it matters, pros and cons
Why it matters
The eye follows what moves first, so rank the entrance by what matters.
Pros
- Attention lands on headline and product.
- Free: only the delay index changes.
- Five items finish in about 500ms.
Cons
- A preference: “no right or wrong.”
- Out of order looks jumpy with long staggers.
- First run only; never delay a usable control.