What problem does it solve? Choosing and implementing the right animation approach for modern web interfaces is difficult: developers often pick the wrong library, animate layout properties that destroy frame rates, or ship motion that violates accessibility requirements. This Skill provides a structured decision framework and implementation patterns for 2026 web motion design. ## Core Features & Use Cases - Library Decision Matrix: Maps 20 animation categories across 4 tiers (Core UX, Immersive, Advanced, Specialized) to the right technology, such as Framer Motion for micro-interactions, GSAP ScrollTrigger for scroll-based storytelling, and React Three Fiber for 3D scenes. - Implementation Patterns: Provides copy-ready code for springs, view transitions, skeleton shimmer, kinetic typography, Lenis smooth scrolling, and layout animations. - Performance & Accessibility Guardrails: Enforces GPU-composited properties (transform/opacity only), prefers-reduced-motion fallbacks, and GSAP cleanup rules to prevent memory leaks. - Use Case: When building a landing page with scroll-driven parallax, animated hero typography, and a 3D product viewer, use this Skill to select GSAP ScrollTrigger with Lenis, word-by-word Framer Motion reveals, and React Three Fiber, while keeping everything at 120fps and WCAG-compliant. ## Quick Start Ask the AI to design and implement the animation strategy for your web page or component, specifying the interaction types you need such as scroll effects, page transitions, or micro-interactions.
