Emil Kowalski Animation Best Practices

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.

When to Apply

Reference these guidelines when:

• Adding animations to React components
• Choosing easing curves or timing values
• Implementing gesture-based interactions (swipe, drag)
• Building toast notifications or drawer components
• Optimizing animation performance
• Ensuring animation accessibility

Rule Categories by Priority

Quick Reference

1. Easing Selection (CRITICAL)

• ease-out-default – Use ease-out as your default easing
• ease-custom-curves – Use custom cubic-bezier over built-in CSS
• ease-in-out-onscreen – Use ease-in-out for on-screen movement
• ease-spring-natural – Use spring animations for natural motion
• ease-ios-drawer – Use iOS-style easing for drawer components
• ease-context-matters – Match easing to animation context

2. Timing & Duration (CRITICAL)

• timing-300ms-max – Keep UI animations under 300ms
• timing-faster-better – Faster animations improve perceived performance
• timing-asymmetric – Use asymmetric timing for press and release
• timing-tooltip-delay – Delay initial tooltips, instant subsequent ones
• timing-drawer-500ms – Use 500ms duration for drawer animations

3. Property Selection (HIGH)

• props-transform-opacity – Animate only transform and opacity
• props-hardware-accelerated – Use hardware-accelerated animations when main thread is busy
• props-will-change – Use will-change to prevent 1px shift
• props-avoid-css-variables – Avoid CSS variables for drag animations
• props-clip-path-performant – Use clip-path for layout-free reveals

4. Transform Techniques (HIGH)

• transform-scale-097 – Scale buttons to 0.97 on press
• transform-never-scale-zero – Never animate from scale(0)
• transform-percentage-translate – Use percentage values for translateY
• transform-origin-aware – Make animations origin-aware
• transform-scale-children – Scale transforms affect children
• transform-3d-preserve – Use preserve-3d for 3D transform effects

5. Interaction Patterns (MEDIUM-HIGH)

• interact-interruptible – Make animations interruptible
• interact-momentum-dismiss – Use momentum-based dismissal
• interact-damping – Damp drag at boundaries
• interact-scroll-drag-conflict – Resolve scroll and drag conflicts
• interact-snap-points – Implement velocity-aware snap points
• interact-friction-upward – Allow upward drag with friction
• interact-pointer-capture – Use pointer capture for drag operations

6. Strategic Animation (MEDIUM)

• strategy-keyboard-no-animate – Never animate keyboard-initiated actions
• strategy-frequency-matters – Consider interaction frequency before animating
• strategy-purpose-required – Every animation must have a purpose
• strategy-feedback-immediate – Provide immediate feedback on all actions
• strategy-marketing-exception – Marketing sites are the exception

7. Accessibility & Polish (MEDIUM)

• polish-reduced-motion – Respect prefers-reduced-motion
• polish-opacity-fallback – Use opacity as reduced motion fallback
• polish-framer-hook – Use useReducedMotion hook in Framer Motion
• polish-dont-remove-all – Don’t remove all animation for reduced motion
• polish-blur-bridge – Use blur to bridge animation states
• polish-clip-path-tabs – Use clip-path for tab transitions
• polish-toast-stacking – Implement toast stacking with scale and offset
• polish-scroll-reveal – Trigger scroll animations at appropriate threshold
• polish-hover-gap-fill – Fill gaps between hoverable elements
• polish-stagger-children – Stagger child animations for orchestration

Key Values Reference

Reference Files