⌘+\

Motion TODO

Topics to Cover

  • Directional Navigation (Reference)
  • Clip-path
  • Easing Curves
  • Perception of Speed
    • Ease-out curve faster

Easing Curves Guide

Ease-Out

When to Use:

  • User-initiated interactions (e.g., opening a modal)
  • Enter and exit animations
  • When you want a responsive and snappy feel

Ease-In-Out

When to Use:

  • When an element is already on screen and needs to move or morph
  • For satisfying, smooth animations

Ease-In

When to Use:

  • Generally avoid due to the slow start, which can make interfaces feel sluggish
  • Use caution with enter animations

Linear

When to Use:

  • Generally avoid for interactive elements, as it can feel robotic
  • Suitable for continuous, non-interactive animations (e.g., loading spinners, marquees)

Ease

When to Use:

  • Hover effects that transition color, background-color, opacity, etc.

Custom Easings

When to Use:

  • When you need a specific feel or acceleration not provided by built-in curves
  • To mimic other platforms or create a unique brand feel
  • To make animations feel more energetic

Creating Custom Curves

  • To experiment with different curves and feel
  • To mimic other platforms or create a unique brand feel

Timing (Duration):

General Guideline: 200-300ms for most animations (sweet spot aligning with human reaction time). Hover Transitions: 150ms or even less (user is already focused, sensitive to color/opacity changes). Modal/Popover Enter: 200ms. Modal/Popover Exit: 150ms. Large View Changes: Longer durations (e.g., Vercel’s Time Machine at 1 second). Steep Easing Curves: May require longer durations to avoid feeling too abrupt (e.g. Vaul example using 500ms). Default for Modals: 200ms with ease-out. Adjust if needed. Perceived Speed: Shorter is generally better; animations longer than 700ms should be rare. Exception: loading spinners should never be slow. Iteration: Take breaks; perception of speed changes with prolonged work. Purpose:

Primary Goal: Add context and clarity to the user experience. Self-Check: Can you easily explain the benefit the animation provides? Examples of Purposeful Animation: Explaining concepts or processes (e.g., Vercel’s v0 animation). Indicating state changes (e.g., App Store cards). When NOT to Animate: High-frequency interactions (e.g., Raycast’s command menu). Keyboard interactions (can feel slow and disconnected). Delight: Use sparingly and thoughtfully. Combine expected animations (enter/exit) with a few well-crafted ones for delight. Prioritize tastefulness and elegance over quantity. Key Takeaway:

Animation should be purposeful, enhancing understanding and usability. Timing should be carefully considered to balance responsiveness with clarity. Delightful animations should be used judiciously to create a positive, engaging experience without overwhelming the user.