Back to Instructables

Motion Guidelines

Defining how elements move to create a natural and consistent experience.

Easing Curves

Ease-In-Out

Standard for UI movement. Starts slow, speeds up, then slows down. Feels natural.

Linear

Constant speed. Can feel mechanical. Use sparingly, mostly for opacity or color changes.

Spring / Bounce

Adds energy and playfulness. Great for attention-grabbing elements or success states.

Duration

  • Micro-interactions: 100ms - 300ms (Fast, snappy)
  • Transitions: 300ms - 500ms (Smooth, noticeable)
  • Complex Animations: 500ms+ (Deliberate, storytelling)