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
• withAnimation for 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"

Make It Stick with a Skill File

This guide teaches you how to prompt for animation. If you want Claude to apply these principles automatically in every response — without you having to ask — drop the Animation skill file into your project. It gives Claude concrete defaults for duration, easing, entry/exit patterns, and reduced motion handling.

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

Exercises

1. Take the "Basic animation" hover prompt and apply it to a set of cards, then iterate using a debugging prompt (e.g. "it feels stiff — add some overshoot") to feel how vocabulary changes the result.
2. Add a staggered list entrance with the "Staggered list" prompt, then ask Claude to wrap it in a prefers-reduced-motion check so motion-sensitive users get a reduced experience.
3. Find one animation in your project that animates width, height, top, or left, and prompt Claude to refactor it to use transform and opacity instead — then confirm it feels smoother.