3 min read
Animations
Motion brings interfaces to life. This guide covers how to describe animation to Claude and implement common patterns across platforms.
Describing Motion to Claude
Use reference vocabulary
- “Like Apple’s spring animations”
- “A Notion-style slide in”
- “Smooth like Linear’s transitions”
- Reference duration: “about 300ms” or “snappy, around 150ms”
Describe the feeling
- Snappy vs smooth vs bouncy
- Subtle vs dramatic
- Quick vs deliberate
Specify timing characteristics
- Ease in, ease out, ease in-out
- Linear (constant speed, usually feels robotic)
- Spring (bouncy, feels natural)
Platform Differences
CSS (Web)
- Transitions for simple state changes
- Keyframes for complex sequences
- Framer Motion / GSAP for advanced control
- CSS custom properties for coordinated animations
SwiftUI (macOS/iOS)
.animation()modifier- Spring animations with dampening and stiffness
withAnimationfor explicit control- Matched geometry effect for shared element transitions
Framer Motion (React)
- Declarative animation props
- Layout animations
- Gesture-based animations
- AnimatePresence for enter/exit
Common Patterns
Hover states
- Subtle scale (1.02-1.05)
- Background color change
- Shadow elevation
- Timing: 150-200ms
Loading states
- Skeleton screens
- Pulse animations
- Spinner with smooth rotation
- Progress indicators
Page transitions
- Fade in/out
- Slide from direction
- Shared element transitions
- Staggered content reveal
Feedback animations
- Button press (scale down slightly)
- Success checkmark
- Error shake
- Toast slide-in
List animations
- Staggered item entrance
- Reorder transitions
- Delete with collapse
- Add with expand
Example Prompts
Basic animation
Add a subtle hover animation to the cards.
They should lift slightly with a shadow on hover.
Feel like 200ms ease-out.Spring animation
When the modal opens, it should spring in from the center.
Use a bouncy spring animation like iOS uses.Staggered list
When the list loads, animate each item in with a slight delay
between them. Fade and slide up from below.Loading state
Add a loading state while data fetches.
Use a skeleton screen that pulses subtly.Gesture response
When dragging the card, it should follow the finger with
a slight spring delay. When released, spring back to
position or snap to a drop zone.Performance Considerations
Animate the right properties
- Transform and opacity are GPU-accelerated
- Avoid animating width, height, top, left
- Use transform: scale() instead of width/height
- Use transform: translate() instead of top/left
Keep animations short
- Most UI animations: 150-300ms
- Page transitions: 300-500ms
- Longer feels sluggish
Respect user preferences
- Check for
prefers-reduced-motion - Provide reduced or no animation alternatives
- Some users get motion sick
Debugging Animation Issues
Animation feels wrong
- “The animation is too slow/fast — try [duration]”
- “It feels stiff — add some overshoot/spring”
- “It’s jarring — add easing, not linear”
Animation is choppy
- “The animation stutters — are we animating expensive properties?”
- “Can we use transform instead of changing layout?”
Animation doesn’t trigger
- “The animation isn’t playing — what triggers it?”
- “Check if the component is remounting instead of updating”
What You’ll Learn
- How to describe motion in prompts
- Platform-specific animation approaches
- Common animation patterns and when to use them
- Performance best practices
- Accessibility considerations for motion