Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his animations.dev course. Contains 43 rules across 7 categories, prioritized by impact.
Reference these guidelines when:
| Priority | Category | Impact |
|---|
| Prefix |
|---|
| 1 | Easing Selection | CRITICAL | ease- |
| 2 | Timing & Duration | CRITICAL | timing- |
| 3 | Property Selection | HIGH | props- |
| 4 | Transform Techniques | HIGH | transform- |
| 5 | Interaction Patterns | MEDIUM-HIGH | interact- |
| 6 | Strategic Animation | MEDIUM | strategy- |
| 7 | Accessibility & Polish | MEDIUM | polish- |
ease-out-default - Use ease-out as your default easingease-custom-curves - Use custom cubic-bezier over built-in CSSease-in-out-onscreen - Use ease-in-out for on-screen movementease-spring-natural - Use spring animations for natural motionease-ios-drawer - Use iOS-style easing for drawer componentsease-context-matters - Match easing to animation contexttiming-300ms-max - Keep UI animations under 300mstiming-faster-better - Faster animations improve perceived performancetiming-asymmetric - Use asymmetric timing for press and releasetiming-tooltip-delay - Delay initial tooltips, instant subsequent onestiming-drawer-500ms - Use 500ms duration for drawer animationsprops-transform-opacity - Animate only transform and opacityprops-hardware-accelerated - Use hardware-accelerated animations when main thread is busyprops-will-change - Use will-change to prevent 1px shiftprops-avoid-css-variables - Avoid CSS variables for drag animationsprops-clip-path-performant - Use clip-path for layout-free revealstransform-scale-097 - Scale buttons to 0.97 on presstransform-never-scale-zero - Never animate from scale(0)transform-percentage-translate - Use percentage values for translateYtransform-origin-aware - Make animations origin-awaretransform-scale-children - Scale transforms affect childrentransform-3d-preserve - Use preserve-3d for 3D transform effectsinteract-interruptible - Make animations interruptibleinteract-momentum-dismiss - Use momentum-based dismissalinteract-damping - Damp drag at boundariesinteract-scroll-drag-conflict - Resolve scroll and drag conflictsinteract-snap-points - Implement velocity-aware snap pointsinteract-friction-upward - Allow upward drag with frictioninteract-pointer-capture - Use pointer capture for drag operationsstrategy-keyboard-no-animate - Never animate keyboard-initiated actionsstrategy-frequency-matters - Consider interaction frequency before animatingstrategy-purpose-required - Every animation must have a purposestrategy-feedback-immediate - Provide immediate feedback on all actionsstrategy-marketing-exception - Marketing sites are the exceptionpolish-reduced-motion - Respect prefers-reduced-motionpolish-opacity-fallback - Use opacity as reduced motion fallbackpolish-framer-hook - Use useReducedMotion hook in Framer Motionpolish-dont-remove-all - Don't remove all animation for reduced motionpolish-blur-bridge - Use blur to bridge animation statespolish-clip-path-tabs - Use clip-path for tab transitionspolish-toast-stacking - Implement toast stacking with scale and offsetpolish-scroll-reveal - Trigger scroll animations at appropriate thresholdpolish-hover-gap-fill - Fill gaps between hoverable elementspolish-stagger-children - Stagger child animations for orchestration| Value | Usage |
|---|---|
cubic-bezier(0.32, 0.72, 0, 1) | iOS-style drawer/sheet animation |
scale(0.97) | Button press feedback |
scale(0.95) | Minimum enter scale (never scale(0)) |
200ms ease-out | Standard UI transition |
300ms | Maximum duration for UI animations |
500ms | Drawer animation duration |
0.11 px/ms | Velocity threshold for momentum dismiss |
100px | Scroll-reveal viewport threshold |
14px | Toast stack offset |
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |