Learning on Web Dev Open is free for all.

Design Craft > Motion with intentOrchestration and stagger
Phase 02Motion with intent113 of 434

Orchestration and stagger

Six things animating at once reads as noise. The same six, staggered by forty milliseconds, reads as one movement.

Build28 minAI implements

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Stagger a list with delays that stay under a total budget
  • Sequence an entrance so the eye follows one path
  • Cap total sequence length regardless of item count
Ask the community

Loading…