ui-animation

UI Animation

- IS: designing, implementing, reviewing, and debugging UI motion: springs, gestures, drag, easing, CSS transitions, keyframes, framer-motion.

- IS NOT: extracting an animation from a video or screen recording (use reverse-engineer-animation), choosing overall visual direction, palettes, or typography (use ui-design), or auditing a whole page's UI quality (use ui-audit).

Reference files

File
Read when

references/decision-framework.md
Default: deciding whether/why to animate, picking easing character

references/spring-animations.md
Using spring physics, framer-motion useSpring, configuring spring params

references/component-patterns.md
Building buttons, popovers, tooltips, drawers, modals, toasts with animation

references/clip-path-techniques.md
Using clip-path for reveals, tabs, hold-to-delete, comparison sliders

references/gesture-drag.md
Implementing drag, swipe-to-dismiss, momentum, pointer capture

references/performance-deep-dive.md
Debugging jank, CSS vs JS, WAAPI, CSS variables trap, Framer Motion caveats

references/review-format.md
Reviewing animation code: Before/After/Why table and issue checklist

references/contextual-animations.md
Implementing contextual icon swaps, word-level stagger entrances, or fixed-offset exit animations

references/transition-recipes.md
Installing a CSS transition: card resize, badge, dropdown, modal, panel, page slide, icon swap, number pop-in, text swap, success animation, avatar hover, error shake