animation-principles
owl-listener/designer-skills
Apply animation principles—easing, staging, follow-through—to tune how a single UI motion feels.
What is animation-principles?
Expert guidance on applying motion design principles to create natural, purposeful UI animations. Use this when refining how a specific animation feels; for product-wide motion tokens use motion-system, and for full interaction specs use micro-interaction-spec.
- Apply easing curves (ease-out, ease-in, ease-in-out, linear) based on animation type and direction
- Set appropriate durations: micro (50-100ms) for button states, short (150-250ms) for fades, medium (250-400ms) for modals, long (400-700ms) for complex choreography
- Implement stagger and sequencing for related elements with 30-50ms delays and consistent direction
- Choose animation types: entrance (fade/slide/scale in), exit (fade/slide/scale out), emphasis (pulse/shake/bounce), transition (morph/crossfade), or loading (shimmer/spinner)
- Ensure animations are interruptible, respect prefers-reduced-motion, and use transform/will-change for performance
How to install animation-principles
npx skills add https://github.com/owl-listener/designer-skills --skill animation-principlesHow to use animation-principles
- 1.Identify the animation type (entrance, exit, emphasis, transition, or loading) and its purpose
- 2.Select the appropriate easing curve: ease-out for entering, ease-in for exiting, ease-in-out for repositioning, linear only for continuous progress
- 3.Choose duration based on complexity: 50-100ms for micro interactions, 150-250ms for simple fades, 250-400ms for page transitions, 400-700ms for choreographed sequences
- 4.If animating multiple related elements, stagger them by 30-50ms each, leading with the most important element
- 5.Implement the animation using transform or will-change for performance, test on low-powered devices, and verify prefers-reduced-motion is respected
Use cases
- Tuning a button's hover state animation to feel snappy and responsive
- Choreographing a modal entrance with staggered child elements fading and sliding in sequence
- Refining a loading skeleton shimmer to feel natural without being distracting
- Adjusting exit animations for dismissed notifications to feel quick and intentional
- Creating emphasis animations (pulse, bounce) that guide user attention without feeling gratuitous
- Product designers refining animation feel and timing
- Frontend engineers implementing motion specs
- Design systems maintainers documenting motion patterns
- UX leads ensuring consistent animation language across products
animation-principles FAQ
Use ease-out (decelerating) for elements entering the screen, and ease-in (accelerating) for elements exiting. Ease-in-out is for elements moving between positions. Linear is only for continuous animations like progress bars.
Faster is almost always better in UI. Keep most animations under 400ms for a responsive feel. Micro interactions (button states) are 50-100ms, simple fades 150-250ms, page transitions 250-400ms, and only complex choreography should reach 400-700ms.
Yes. Stagger related items by 30-50ms each, leading with the most important element. Keep the total sequence duration under 700ms and use consistent direction for all movements.
Always support prefers-reduced-motion by disabling or significantly reducing animations for users who have set this preference. This is a requirement, not optional.
Use CSS transform and will-change properties, avoid animating layout properties (width, height, position), test on low-powered devices, and keep animations interruptible so users can cancel them mid-flight.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: animation-principles
description: Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.
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
More from owl-listener/designer-skills and the wider catalog.
card-sort-analysis
Analyze card sort results into proposed groupings and labels for information architecture.
case-study
Craft compelling portfolio case studies with narrative arc, process evidence, and measurable outcomes.
click-test-plan
Design first-click and click tests to measure findability and navigation clarity.
color-system
Build accessible, systematic color palettes with tonal scales, semantic roles, and WCAG contrast compliance.
competitive-analysis
Systematically analyze competitor UX patterns, features, and gaps to inform design strategy.
component-spec
Write complete, implementable component specifications for design systems.