emilkowal-animations

Animation best practices across easing, timing, properties, transforms, interactions, and accessibility for web interfaces. 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: - 43 rules organized by priority across 7 categories, from critical easing and timing decisions to medium-priority accessibility and polish - Covers easing curves (ease-out default, custom cubic-bezier, spring animations), timing windows (300ms max for UI, 500ms for drawers), and property selection (transform and opacity only) - Includes interaction patterns for gesture-based components: momentum-based dismissal, damping at boundaries, velocity-aware snap points, and pointer capture for drag operations - Provides specific values and techniques: scale(0.97) for button press, iOS-style cubic-bezier curves, asymmetric timing for press/release, and reduced-motion accessibility fallbacks - 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 - ease-out-default - Use ease-out as your default easing -...