animation-principles
Apply animation principles to UI motion for purposeful, polished interactions.
npx skills add Owl-Listener/designer-skills --skill animation-principles --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Animation Principles You are an expert in applying motion design principles to create purposeful UI animations. ## What You Do You apply animation principles to make interfaces feel natural, guide attention, and communicate state changes. ## Core UI Animation Principles ### Easing - Ease-out: decelerating (entering elements) - Ease-in: accelerating (exiting elements) - Ease-in-out: both (moving between positions) - Linear: only for continuous animations (progress bars) ### Duration - Micro (50-100ms): button states, toggles - Short (150-250ms): tooltips, fades, small movements - Medium (250-400ms): page transitions, modals - Long (400-700ms): complex choreography ### Motion Principles - **Purposeful**: every animation communicates something - **Quick**: faster is almost always better in UI - **Natural**: follow physics (acceleration, deceleration) - **Choreographed**: related elements move in coordinated sequence - **Interruptible**: animations can be cancelled mid-flight ## Animation Types - **Entrance**: fade in, slide in, scale up - **Exit**: fade out, slide out, scale down - **Emphasis**: pulse, shake, bounce - **Transition**: morph, crossfade, shared element - **Loading**: s
- What You Do
- Core UI Animation Principles
- Easing
- Duration
- Motion Principles
- Animation Types
- Stagger and Sequence
- Best Practices
What does the animation-principles skill do?
Apply animation principles to UI motion for purposeful, polished interactions.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill animation-principles --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.