Localized reading guide
web-animation-designPurpose, usage and source
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.
Source retrieved:
- Source repository
- vercel-labs/open-agents
- SKILL.md
.agents/skills/web-animation-design/SKILL.md- Repository stars
- 5,871
- Repository updated
- 2026-08-29
- Categories
- Agent workflows
- Last collected
License: MIT
Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.
The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.
What this Skill does
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.
How the upstream workflow works
Quick Start
Every animation decision starts with these questions: Is this element entering or exiting? → Use ease-out Is an on-screen element moving? → Use ease-in-out Is this a hover/color transition? → Use ease
When to 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
Upstream passage · L144 ↗When to Use Springs
Drag interactions with momentum Elements that should feel "alive" (Dynamic Island) Gestures that can be interrupted mid-animation Organic, playful interfaces
Upstream passage · L169 ↗Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200msRequirements and setup
No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.
Limits and quality checks
ease-in (Almost Never)
Avoid for UI animations. Makes interfaces feel sluggish because the slow start delays visual feedback.
Upstream passage · L100 ↗Start with a safe trial
- Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
- Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
- Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
- Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.
Read further in the source
- Web Animation Design
- Initial Response
- Review Format (Required)
- Quick Start
- ease-out (Most Common)
- ease-in-out (For Movement)
- ease (For Hover Effects)
- linear (Avoid in UI)
- ease-in (Almost Never)
- Paired Elements Rule
- Duration Guidelines
- The Frequency
- When to Animate
- Spring Animations
- When to Use Springs
- Configuration
- Bounce Guidelines
- Interruptibility
- The Golden Rule
- Optimization Techniques
- CSS vs. JavaScript
- Accessibility
- prefers-reduced-motion
- Reduced Motion Guidelines
- Touch Device Considerations
- Practical Tips
- Easing Decision Flowchart
- Reference Files
Related Skills
Translation and scope
This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.
This introduction refers to the pinned version below; current repository activity and collection time are shown separately.
- Pinned source
- Read the original ↗
- Source retrieved
- Source commit
cf865e94de7729751c747171785b6ce57e7b178c- Source SHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332