Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
metadata
{"short-description":"Design and implement web animations that feel natural and purposeful"}
Web Animation Design
A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.
Initial Response
When this skill is first invoked without a specific question, respond only with:
I'm ready to help you with animations based on Emil Kowalski's animations.dev course.
Do not provide any other information until the user asks a question.
Review Format (Required)
When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:
Use for hover states and color transitions. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations.
transition: background-color 150ms ease;
linear (Avoid in UI)
Only use for:
Constant-speed animations (marquees, tickers)
Time visualization (hold-to-delete progress indicators)
Linear feels robotic and unnatural for interactive elements.
ease-in (Almost Never)
Avoid for UI animations. Makes interfaces feel sluggish because the slow start delays visual feedback.
Paired Elements Rule
Elements that animate together must use the same easing and duration. Modal + overlay, tooltip + arrow, drawer + backdrop—if they move as a unit, they should feel like a unit.
/* Both use the same timing */.modal {
transition: transform 200ms ease-out;
}
.overlay {
transition: opacity 200ms ease-out;
}
Timing and Duration
Duration Guidelines
Element Type
Duration
Micro-interactions
100-150ms
Standard UI (tooltips, dropdowns)
150-250ms
Modals, drawers
200-300ms
Rules:
UI animations should stay under 300ms
Larger elements animate slower than smaller ones
Exit animations can be ~20% faster than entrance
Match duration to distance - longer travel = longer duration
The Frequency
Determine how often users will see the animation:
100+ times/day → No animation (or drastically reduced)
Occasional use → Standard animation
Rare/first-time → Can be more special
Example: Raycast never animates because users open it hundreds of times a day.
When to Animate
Do animate:
Enter/exit transitions for spatial consistency
State changes that benefit from visual continuity
Responses to user actions (feedback)
Rarely-used interactions where delight adds value
Don't animate:
Keyboard-initiated actions
Hover effects on frequently-used elements
Anything users interact with 100+ times daily
When speed matters more than smoothness
Marketing vs. Product:
Marketing: More elaborate, longer durations allowed
Product: Fast, purposeful, never frivolous
Spring Animations
Springs feel more natural because they don't have fixed durations—they simulate real physics.
When to Use Springs
Drag interactions with momentum
Elements that should feel "alive" (Dynamic Island)
/* Disable hover animations on touch devices */@media (hover: hover) and (pointer: fine) {
.element:hover {
transform: scale(1.05);
}
}
Touch devices trigger hover on tap, causing false positives.
Practical Tips
Quick reference for common scenarios. See PRACTICAL-TIPS.md for detailed implementations.
Scenario
Solution
Make buttons feel responsive
Add transform: scale(0.97) on :active
Element appears from nowhere
Start from scale(0.95), not scale(0)
Shaky/jittery animations
Add will-change: transform
Hover causes flicker
Animate child element, not parent
Popover scales from wrong point
Set transform-origin to trigger location
Sequential tooltips feel slow
Skip delay/animation after first tooltip
Small buttons hard to tap
Use 44px minimum hit area (pseudo-element)
Something still feels off
Add subtle blur (under 20px) to mask it
Hover triggers on mobile
Use @media (hover: hover) and (pointer: fine)
Easing Decision Flowchart
Is the element entering or exiting the viewport?
├── Yes → ease-out
└── No
├── Is it moving/morphing on screen?
│ └── Yes → ease-in-out
└── Is it a hover change?
├── Yes → ease
└── Is it constant motion?
├── Yes → linear
└── Default → ease-out
Reference Files
PRACTICAL-TIPS.md - Detailed implementations for common animation scenarios
