> emilkowal-animations
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.
curl "https://skillshub.wtf/pproenca/dot-skills/emilkowal-animations?format=md"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
| 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- |
Quick Reference
1. Easing Selection (CRITICAL)
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 context
2. Timing & Duration (CRITICAL)
timing-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 animations
3. Property Selection (HIGH)
props-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 reveals
4. Transform Techniques (HIGH)
transform-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 effects
5. Interaction Patterns (MEDIUM-HIGH)
interact-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 operations
6. Strategic Animation (MEDIUM)
strategy-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 exception
7. Accessibility & Polish (MEDIUM)
polish-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
Key Values Reference
| 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 |
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
> related_skills --same-repo
> rust-write-tests
Skill for writing expert-level Rust tests. Teaches the "What Could Break?" framework, five transformations from superficial to expert tests, flake hunting protocol, intent-based assertions, naming conventions, and a mandatory self-review checklist. Triggers on writing Rust tests, designing test cases, improving test quality, or reviewing test coverage.
> rust-implement
Write production-grade Rust code using a multi-pass approach. Design types first, then implement, then simplify, then verify with automated lint. Use this skill whenever writing new Rust functions, structs, modules, or features. Triggers on Rust implementation, new Rust code, Rust functions, Rust modules, error handling in Rust, async Rust, or type design in Rust.
> valid-skill
A valid test skill with proper formatting. This skill should pass all validations and serves as a reference for the expected format.
> too-long-skill
This skill has more than 500 lines which should fail validation.