Emilkowal Animations

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 58 rules across 8 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
• Expressing any of the above with Tailwind CSS v4 utilities (see the tw- category)

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-spring-config` - Configure springs with duration and bounce
• `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
• `transform-starting-style` - Animate enter states with @starting-style

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
• `interact-multitouch` - Ignore extra touch points during drag
• `interact-touch-hover` - Gate hover animations behind a pointer media query

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
• `strategy-cohesion` - Match motion to the component's personality
• `strategy-review-fresh-eyes` - Review animations in slow motion and the next day

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` - Keep gentle 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

8. Tailwind v4 Utilities (MEDIUM)

Express the principles above with proper Tailwind CSS v4 utilities. Applies only to Tailwind v4 projects; the raw-CSS and Framer Motion rules above remain the source of truth.

• `tw-ease-duration-defaults` - Set ease-out and a sub-300ms duration explicitly
• `tw-custom-easing-theme` - Register custom easing curves as @theme tokens
• `tw-press-scale` - Use active:scale-[0.97] for button press feedback
• `tw-asymmetric-timing` - Split press and release timing with active:duration
• `tw-starting-enter` - Animate enter states with the starting: variant
• `tw-reduced-motion` - Gate movement behind motion-safe / motion-reduce
• `tw-origin-aware` - Set transform-origin with origin-* utilities
• `tw-will-change` - Scope will-change-transform to the active gesture

Key Values Reference

| Value | Usage |