AI Skill Report Card
Designing Purposeful Motion
YAML--- name: designing-purposeful-motion description: Designs functional web animations using the MOTION framework with UX-first approach. Use when adding animation to interfaces, improving user experience through motion, or validating animation purposes. ---
Purposeful Motion Design
Quick Start15 / 15
Before any animation work:
UX Function Check:
1. What user need does this animation serve?
2. Does it guide attention, provide feedback, or show relationships?
3. Can the interface work without it?
If you can't answer #1 clearly, don't animate.
Recommendation▾
Add a concrete accessibility testing checklist in the workflow section
Workflow14 / 15
Progress:
- Define animation's UX function (feedback, guidance, hierarchy, continuity)
- Choose appropriate duration (100ms micro, 200-300ms transitions, 500ms+ pages)
- Select easing curve (ease-out entrances, ease-in exits, ease-in-out bidirectional)
- Implement with fallbacks (prefers-reduced-motion)
- Test on actual devices and connections
- Validate against function - does it achieve the UX goal?
Recommendation▾
Include one example showing a bad animation with explanation of why it fails the UX function test
Examples18 / 20
Example 1: Button Feedback Input: "I want the button to feel responsive" UX Function: Provide immediate tactile feedback Output:
CSS.button { transform: scale(1); transition: transform 100ms ease-out; } .button:active { transform: scale(0.98); }
Example 2: Page Transition Input: "Smooth page changes" UX Function: Maintain spatial continuity between views Output:
CSS.page-transition { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease-out, transform 500ms ease-out; } .page-transition.visible { opacity: 1; transform: translateY(0); }
Example 3: Scroll Reveal Input: "Animate content as user scrolls" UX Function: Progressive disclosure to reduce cognitive load Output:
CSS.reveal { opacity: 0; transform: translateY(40px); transition: opacity 300ms ease-out 0.1s, transform 300ms ease-out 0.1s; } .reveal.in-view { opacity: 1; transform: translateY(0); }
Recommendation▾
Compress the duration guidelines and easing strategy sections - they're slightly verbose for Claude's knowledge level
Duration Guidelines
- 100ms: Micro-feedback (hovers, button presses, toggles)
- 200-300ms: Element transitions (dropdowns, modals, state changes)
- 500ms+: Page-level changes (route transitions, major layout shifts)
- 1000ms+: Loading states, complex sequences
Easing Strategy
- ease-out (0.25, 0.46, 0.45, 0.94): Entrances, reveals, expansions
- ease-in (0.55, 0.055, 0.675, 0.19): Exits, dismissals, contractions
- ease-in-out (0.645, 0.045, 0.355, 1): Bidirectional, position changes
- Custom cubic-bezier: For brand-specific character
Hover State Choreography
Layer multiple properties with staggered timing:
CSS.card { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 200ms ease-out, box-shadow 250ms ease-out 50ms; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
Loading State Design
Show progress and maintain engagement:
CSS.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
Best Practices
- Always include
prefers-reduced-motion: reducefallbacks - Test on 60fps and 120fps displays
- Use
transformandopacityfor performance - Stagger multiple element animations by 50-100ms
- Provide immediate feedback (<100ms) for user inputs
- Match animation personality to brand character
Common Pitfalls
- Decorative motion: "It looks cool" isn't a UX function
- Duration mismatch: 500ms micro-interactions feel sluggish
- Easing confusion: Using ease-in for entrances feels unnatural
- Missing fallbacks: Breaking experience for motion-sensitive users
- Performance ignorance: Animating width/height instead of transform
- Overuse: Every element doesn't need animation