emilkowal-animations

Emil Kowalski Animation Best Practices is a curated guide for designing and reviewing web interface motion, distilled from Emil Kowalski's teachings, his open-source libraries Sonner and Vaul, and the animations.dev course. It collects 58 rules organized into 8 categories and prioritized by impact, so decisions about easing, timing, and technique can be made consistently across React, CSS, and Framer Motion code, with an additional category for expressing the same principles in Tailwind CSS v4. It applies when adding animations to components, choosing easing curves or durations, building gesture interactions, creating toasts or drawers, or reviewing existing motion.

The categories run from the most impactful to supporting polish: Easing Selection and Timing and Duration are marked critical, followed by Property Selection and Transform Techniques as high impact, then Interaction Patterns, Strategic Animation, Accessibility and Polish, and the Tailwind v4 utilities. Concrete rules include defaulting to ease-out and preferring custom cubic-bezier curves, keeping UI animations under 300ms with asymmetric press and release timing, animating only transform and opacity for performance, scaling buttons to 0.97 on press, making animations interruptible and origin-aware, and using momentum-based dismissal and velocity-aware snap points for drag interactions. Accessibility rules cover respecting prefers-reduced-motion, using opacity as a reduced-motion fallback, the useReducedMotion hook in Framer Motion, and keeping a gentle animation rather than removing motion entirely.

Each rule links to its own reference file, and rules carry prefixes tied to their category, such as ease-, timing-, props-, transform-, interact-, strategy-, polish-, and tw-. The Tailwind section maps the underlying principles to v4 utilities like active:scale, starting: variants, and custom easing tokens, while noting the raw-CSS and Framer Motion rules remain the source of truth. Use it as a checklist and reference when implementing or auditing interface animation.