Animation Principles
- 1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
animation-principles is an agent skill that applies motion-design rules to UI animations so developers can build interactions that guide attention and communicate state without gimmicky motion.
About
animation-principles is a designer skill from owl-listener/designer-skills that encodes practical UI motion guidance for easing, duration tiers, and purposeful transitions. It specifies micro durations of 50–100ms for button states, short 150–250ms fades and tooltips, and when to use ease-in, ease-out, ease-in-out, or linear motion such as progress bars. Developers reach for it when implementing CSS or framework animations and need consistent timing and easing instead of arbitrary transitions. The skill helps teams align motion with attention hierarchy and state communication across web and mobile interfaces.
- Applies 5 core motion principles: purposeful, quick, natural, choreographed, interruptible
- Defines precise easing curves and duration ranges (micro 50-100ms through long 400-700ms)
- Generates entrance, exit, emphasis, transition, and loading animation types
- Enforces stagger sequencing with 30-50ms offsets and total sequence limits
- Produces ready-to-implement animation specs for Cursor, Claude Code, or Framer
Animation Principles by the numbers
- 1,016 all-time installs (skills.sh)
- +47 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #383 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill animation-principlesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
What duration and easing should UI animations use?
Ensure every UI motion feels natural, guides attention, and communicates state changes without feeling gimmicky.
Who is it for?
Frontend developers and designers implementing interaction motion who need concrete easing and millisecond duration defaults.
Skip if: Game animation rigs, video post-production, or projects with no interactive UI motion requirements.
When should I use this skill?
The user asks about UI animation timing, easing, micro-interactions, or making transitions feel natural and purposeful.
What you get
UI transitions with defined easing curves, duration tiers, and motion that communicates state changes.
- Motion specs
- Easing and duration guidelines
- Implemented UI transitions
By the numbers
- Micro UI animations: 50–100ms for button states and toggles
- Short UI animations: 150–250ms for tooltips and fades
Files
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: skeleton shimmer, spinner, progress
Stagger and Sequence
- Stagger related items by 30-50ms each
- Lead with the most important element
- Limit total sequence duration to under 700ms
- Use consistent direction for related movements
Best Practices
- Support prefers-reduced-motion
- Don't animate for the sake of it
- Test on low-powered devices
- Keep animations under 400ms for responsive feel
- Use will-change or transform for performance
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What durations does animation-principles recommend?
animation-principles recommends micro animations at 50–100ms for button states and toggles, and short 150–250ms durations for tooltips, fades, and smaller UI transitions.
Which easing should entering UI elements use?
animation-principles assigns ease-out (decelerating) to entering elements, ease-in to exiting elements, and ease-in-out when elements move between positions.
Is Animation Principles safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.