A practical guide to tasteful web animation

Good motion is invisible. You notice a bad animation immediately — it stutters, it overstays its welcome, it distracts. A great one simply makes the interface feel responsive and intentional.

Here are the principles we follow in StellarGrid.

1. Motion should mean something

Every animation should answer a question:

• Where did this come from? (an element sliding in from a panel)
• What just changed? (a counter ticking up to its value)
• What can I do next? (a button lifting on hover)

If an animation does not communicate something, cut it.

2. Respect the easing

Linear motion feels robotic. Real objects accelerate and decelerate. We lean on a single, confident easing curve for almost everything:

transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

That curve — sometimes called easeOutExpo — starts fast and settles gently, which reads as crisp and premium.

3. Stagger for hierarchy

When several elements appear at once, a tiny stagger guides the eye:

<div data-reveal style="--reveal-delay: 0ms">…</div>
<div data-reveal style="--reveal-delay: 90ms">…</div>
<div data-reveal style="--reveal-delay: 180ms">…</div>

Eighty to a hundred milliseconds between items is usually perfect.

4. Always honour reduced motion

Some people get motion sickness from parallax and large transitions. Honouring their preference is a one-line commitment:

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Accessibility is not a constraint on good design — it is part of the definition.

Tasteful motion is restraint plus intent. Use less than you think you need, and make every frame earn its place.