animations_skill

Overview

This skill helps you create performant, accessible web animations with correct timing, easing, and framework patterns. It focuses on GPU-accelerated properties, reduced-motion respect, duration guidelines, and common framework traps to keep animations smooth and inclusive. Use it to choose the right technique, library, and configuration for production-grade UI motion.

How this skill works

It inspects which CSS properties and APIs you use and recommends GPU-friendly alternatives (transform, opacity) to avoid layout and paint thrashing. It enforces reduced-motion preferences, sensible durations and easing choices, and framework patterns for reliable enter/exit animations. The skill also guides library selection and when to apply will-change or optimization only when necessary.

When to use it

• When animations cause jank or drop below 60fps
• When you need accessible motion that respects prefers-reduced-motion
• When building enter/exit sequences or list animations in React or other frameworks
• When choosing between CSS, AutoAnimate, Motion, or GSAP for a project
• When you need timing, easing, and duration guidelines for consistent UX

Best practices

• Animate only transform and opacity for GPU acceleration
• Respect prefers-reduced-motion; remove parallax and infinite loops for reduced-motion users
• Use short durations: 100–200ms for micro-interactions, 200–300ms for transitions, 300–500ms for page transitions
• Use ease-out for entering elements, ease-in for exiting, and linear only for continuous spinners
• Avoid transition: all; declare specific properties to prevent unintended effects
• Apply will-change sparingly and only immediately before an animation, then remove it

Example use cases

• Replace left/top animations with translateX/translateY for smooth sliding panels
• Implement accessible page and modal transitions that disable motion for users who request reduced motion
• Animate dynamic lists with AutoAnimate for small bundle impact or use Motion/AnimatePresence for complex enter/exit choreography
• Create micro-interactions (hover, focus) using short transitions and scale transforms
• Build a progress spinner with linear timing and an infinite loop that can be paused or disabled via user preference