dardo
ESLet’s talk ↗

Design & craft

How to use motion without making a website exhausting

Animation should help someone follow the story, recognize a change or understand an interface. Motion becomes expensive when it keeps demanding attention after it has done its job.

01

Give each movement a job

Decide whether a transition communicates hierarchy, a state change or a brand moment. Remove motion that does not support one of those purposes. Keep the main action available even when a visitor scrolls quickly or skips an introduction.

02

Design the resting state

A page should settle. Continuous background effects can consume resources while adding little information. Inspect the site while idle, after an interaction and in a hidden tab, not only during the impressive opening sequence.

03

Keep a complete quiet version

Reduced-motion and fallback states need the same content and navigation as the full experience. Test them as designed versions of the product. A static image should not cover the only link or make the page depend on a renderer starting successfully.

From an idea to something real

Make your next
move matter.

Start a project ↗Explore the project planner →