skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

web-animation-router

Route web animation tasks to CSS-native, Motion, GSAP, AutoAnimate, Rive, or dotLottie strategies.

15|2|Updated May 23, 2026
Search Tags:#accessibility#lenis#web animation#motion.dev#scroll-driven#gsap scrolltrigger#motion routing
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill web-animation-router
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-animation-router
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/web-animation-router
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill web-animation-router

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents slow, inconsistent, and inaccessible motion work by routing each animation requirement to the best-fit library or CSS-native approach, then applying production-ready recipes and constraints.

Core Features & Use Cases

  • Route-by-requirement animation selection: chooses CSS-native, Motion, GSAP, AutoAnimate, Rive, or dotLottie based on DOM changes, scroll behavior, SVG needs, and orchestration complexity.
  • Production motion guardrails: enforces CSS-first, one animation library per DOM element, reduced-motion gating, and performance budgets (compositor-only properties, INP discipline).
  • Token + recipe foundation: applies motion tokens/springs, scroll-driven strategies (CSS scroll/view timelines or GSAP+Lenis sync), and View Transitions handling for page changes.
  • Use case examples: implement scroll-driven section reveals, kinetic typography with variable-font axes, microinteraction catalogs (buttons, accordions, tooltips), AI-product UX streaming motion, and SVG morph/draw effects.

Quick Start

Use the web-animation-router skill to implement the animation for a feature by asking it to select the cheapest compliant tool (CSS-native first, then Motion/GSAP/others) and provide the exact production recipe with accessibility and performance gates.

Frequently Asked Questions about web-animation-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the right web animation library for scroll-driven effects?▼

Choosing the right web animation library for scroll-driven effects requires routing based on complexity: CSS scroll and view timelines handle native cases, while GSAP combined with Lenis manages complex scroll-driven orchestration and synchronization.

What's the best way to ensure web animations are accessible and safe for reduced-motion users?▼

To ensure web animations are accessible, apply reduced-motion gating checks to disable or substitute motion for users with accessibility preferences, enforcing strict compliance alongside performance-first compositor property constraints.

Can I use GSAP and Motion on the same DOM element for complex microinteractions?▼

No, you cannot use GSAP and Motion on the same DOM element; a strict one-animation-library-per-element rule prevents conflicts and maintains performance budgets for reliable microinteractions.

When do I need CSS-native animations instead of Motion or GSAP?▼

You need CSS-native animations instead of Motion or GSAP for simple DOM changes and basic transitions, adhering to a CSS-first strategy that minimizes bundle size and preserves INP discipline.

How do I implement kinetic typography with variable-font axes and page transitions?▼

Implement kinetic typography using variable-font axes through specialized routing, and handle page transitions using View Transitions API strategies for smooth, shippable motion changes.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
daffy0208daffy0208
34

animation-designer

Implement motion design improvements for React web applications using Framer Motion, CSS, Tailwind, and GSAP.

Community
Intermediate
TheGoat395TheGoat395
117

motion-react-page-transitions

Implement React page and route transitions with Motion and AnimatePresence.

Community
Advanced
TMHSDigitalTMHSDigital
2

mobile-animations

Add smooth animations to React Native and Flutter apps using Reanimated 3, Lottie, and Rive.

Community
Intermediate