animation-tool-router
Use when planning or implementing website motion, scroll choreography, microinteractions, page transitions, text reveals, pinned sections, smooth scrolling, Lottie, Three.js/R3F, WebGL, or animation-heavy premium sites. Chooses the lightest appropriate tool and defines reduced-motion fallbacks.
npx skills add TheGoat395/Codex-Skills --skill animation-tool-router --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Animation Tool Router Use this skill to choose motion tools by purpose, not hype. ## Routing - CSS transitions: hover/focus states, small fades, transforms, simple menus. - Motion: React component animation, layout transitions, presence, gestures, small scroll reveals. - GSAP: precise timelines, pinned scroll scenes, split text, SVG paths, complex choreography. - Lenis: smooth scroll feel when the project can support it and anchor/modal behavior is handled. - Lottie: exported vector motion when file weight and accessibility are acceptable. - Three.js/R3F: real 3D product/scene work, not decoration. - No dependency: static content where motion would distract or harm performance. ## Motion Requirements Define: - purpose: reveal, continuity, depth, state, tactility, narrative, or product explanation - trigger: load, hover, focus, click, route, scroll, drag, or viewport - duration/easing - reduced-motion fallback - cleanup/unmount behavior - performance risks ## Avoid - animation because the page is otherwise generic - scroll hijacking - motion that hides content - parallax that causes nausea or jank - WebGL scenes that are blank on mobile
- Routing
- Motion Requirements
- Avoid
What does the animation-tool-router skill do?
Use when planning or implementing website motion, scroll choreography, microinteractions, page transitions, text reveals, pinned sections, smooth scrolling, Lottie, Three.js/R3F, WebGL, or animation-heavy premium sites. Chooses the lightest appropriate tool and defines reduced-motion fallbacks.
How do I install it?
Run `npx skills add TheGoat395/Codex-Skills --skill animation-tool-router --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TheGoat395/Codex-Skills, a repository with 115 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.