Animations
You already know why animation matters. It guides attention, communicates what just happened, and makes an interface feel crafted instead of thrown together. A card that fades in feels intentional. A modal that snaps open with no transition feels broken.
The difference between good animation and bad animation is rarely the code. It’s the decisions. Which easing curve. How long. What triggers it. Claude Code can write every keyframe and spring function you need — but you have to know what to ask for. This guide gives you the vocabulary and the instincts.
Choosing the Right Easing
This is the single most important animation decision you’ll make. Every motion in your interface falls into one of these categories.
Ease-out — for things entering the screen. Fast start, gentle landing. The element arrives with momentum and settles into place. A modal with ease-out feels like a card being placed on a table — it slides in with energy then stops cleanly. Use this for modals, toasts, dropdowns, page content appearing.
Ease-in — for things leaving the screen. Slow start, fast exit. The element gathers speed as it departs. Think of tossing something into a bin — it accelerates away. Use this for closing modals, dismissing notifications, elements scrolling out of view.
Ease-in-out — for things moving within the screen. Smooth ramp up, smooth ramp down. This is for elements that stay visible but change position or size. A sidebar expanding, a panel resizing, a card moving from one column to another. It feels balanced and deliberate.
Spring — for interactions that should feel physical and alive. Springs overshoot slightly then settle, like real objects do. A spring animation on a toggle feels like flicking a light switch — it snaps past center, bounces back, and lands. Use springs for toggles, switches, drag-and-drop, anything that responds to a direct user action where you want personality.
Linear — almost never. Constant speed with no acceleration feels robotic to humans. The only places linear works are continuous, mechanical things: progress bars filling, loading spinners rotating, marquee text scrolling. If it has a start and end, don’t use linear.
Timing That Feels Right
Duration matters as much as easing. Too fast and the user misses it. Too slow and the interface feels sluggish.
- Hover states and micro-interactions: 100–200ms. These should feel instant but smooth.
- Entrances and exits (modals, dropdowns, toasts): 200–350ms. Enough to register, not enough to wait.
- Page transitions and layout shifts: 300–500ms. These move more content, so they need more time to feel natural.
- Staggered lists: 50–100ms delay between each item. Long enough to see the cascade, short enough that the last item doesn’t arrive embarrassingly late.
When in doubt, start at 200ms with ease-out and adjust from there.
Describing Motion to Claude
Claude responds well when you name the easing, describe the feeling, or reference something familiar.
Name the feeling: “snappy,” “bouncy,” “smooth,” “gentle.” These map to real animation properties. Snappy means short duration, sharp easing. Bouncy means spring physics. Smooth means ease-in-out with moderate duration.
Reference things you’ve seen: “Like Apple’s spring animations,” “A Notion-style slide-in,” “Smooth like Linear’s page transitions.” Claude knows these products and will match the feel.
Specify duration when it matters: “About 200ms” or “Keep it under 300ms” gives Claude a concrete target instead of guessing.
Try This
These prompts produce visible, satisfying results. Copy them directly or adapt them to your project.
Staggered card entrance:
Add a fade-in animation to each card as it appears.
Stagger them so they cascade down the page.
Use ease-out, about 300ms per card, with 80ms delay between each.Interactive button hover:
When I hover over a button, scale it up to 1.03 with a spring animation.
On press, scale it down to 0.97. It should feel tactile, like pushing a real button.Modal entrance:
Add a slide-up entrance animation to the modal with a subtle fade.
Use ease-out, around 250ms. It should feel smooth, not mechanical.
When it closes, ease-in with a slightly faster duration.Loading skeleton:
While data is loading, show skeleton placeholders that pulse subtly.
Use a gentle opacity animation between 0.4 and 0.7, about 1.5 seconds per cycle.Drag and drop:
When dragging the card, it should follow the cursor with a spring animation
that has slight lag. When released, it should spring to its new position
with a little overshoot then settle.When Something Feels Off
You don’t need to debug code — you need to describe the problem.
- “Too stiff” — tell Claude to add spring physics or overshoot
- “Too slow” — cut the duration by 30–50%
- “Choppy or stuttering” — ask Claude to animate using transforms and opacity instead of layout properties like width and height
- “Jarring” — the easing is probably wrong. Swap linear for ease-out, or add a spring
And always ask Claude to respect prefers-reduced-motion. Some users experience motion sickness, and good animation includes knowing when not to animate.
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.