web-animation-router

name	web-animation-router
description	Route AND implement web animation for 2026 — pick the right tool (CSS-native, Motion/motion.dev, GSAP, AutoAnimate, Rive, dotLottie) then apply production recipes. Covers: motion tokens & CSS native springs via linear(), scroll-driven animation (CSS scroll-timeline + GSAP/Lenis), page/View Transitions, kinetic typography & variable fonts, microinteraction catalog, AI-product UX motion (streaming/thinking states), motion accessibility & performance. Use when: animation library, framer motion, motion, gsap, lenis, autoanimate, rive, lottie, scroll animation, scroll-driven, view transition, svg morph, splittext, layout shift, timeline, springs, easing tokens, kinetic type, variable font animation, microinteraction, streaming UI, reduced-motion, INP, will-change. SKIP: canvas/WebGL 3D scenes (→three.js/r3f), video render (→remotion).
stacks	["CSS-native","Motion","GSAP","Lenis","AutoAnimate","Rive","dotLottie"]
tags	["animation","motion","gsap","lenis","autoanimate","scroll","view-transitions","springs","tokens","kinetic-typography","microinteractions","ai-ux","accessibility","performance","ui","ux"]
source	vechkasov-global-skills
risk	low-stakes

🎯 Version Requirements (verified via harvest 2026-05-22)

Primary pins:

• GSAP: 3.15.0 (released April 2026; all plugins free for commercial use post-Webflow acquisition — ScrollTrigger, Flip, SplitText, MorphSVG, DrawSVG, Observer, MotionPath, ScrambleText, @gsap/react useGSAP)
• Motion (motion.dev, ex-framer-motion): 12.x (package motion; React entry motion/react, Vue motion-v; hybrid WAAPI/JS engine)
• Lenis (smooth scroll): 1.3.x (package lenis; the old @studio-freight/lenis is deprecated)
• AutoAnimate: 0.9.x (~2.3KB; immediate-children morph; respects prefers-reduced-motion by default)
• Rive: WASM runtime for interactive vector state machines; dotLottie: @lottiefiles/dotlottie-web for AE handoff (replaces heavy lottie-web)
• CSS-native: linear() springs, animation-timeline: scroll()/view(), @starting-style, interpolate-size: allow-keywords, cross-document View Transitions (verify per-browser support in references)

Some design-system token VALUES in references/motion-tokens-and-springs.md are marked [UNVERIFIED] — confirm against the live design-system docs before quoting exact numbers.

Use this skill when

• Picking AND implementing an animation approach for a feature, section, or whole site
• Defining a motion token system (durations, easings, CSS native springs via linear())
• Scroll-driven work: CSS scroll/view timelines, or GSAP ScrollTrigger pinning/scrubbing + Lenis
• Page transitions: same- or cross-document View Transitions API, or JS routers (swup/taxi/barba)
• Kinetic typography: variable-font axis animation, split/stagger reveals, text-on-path, marquee
• Microinteractions: buttons, toggles, inputs, tabs, accordion, tooltip, menu, card hover, etc.
• AI-product UX motion: thinking states, streaming token text, tool-use/agent indicators
• SVG morph, stroke draw-in, path-following; list add/remove/reorder; component enter/exit
• Enforcing motion accessibility (, vestibular safety, WCAG 2.2)