Motion
Page transitions, gestures, and scroll, plus the skills and plugins that help an agent write the animation correctly.
Library 4 · Skill 2 · Plugin 1 · Edited 2026-10-10
All
MotionLibraryA React, JS, and Vue animation library: gestures, layout transitions, and scroll, written as declarations.Fit：Interaction motion in a React project.MIT · motion.devMotion AI KitPluginMotion's AI kit: a Cursor plugin, or npx motion-ai to install Motion skills and a docs MCP for Claude Code and others.Fit：You already chose Motion and want the agent to write it correctly.motion.devGSAPLibraryTimelines and ScrollTrigger, framework-agnostic. After the Webflow acquisition the plugins are free, including commercial use.Fit：Complex timelines and scroll-driven pages.免费商用 · gsap.comgsap-skillsSkillOfficial GSAP agent skills: the core API, timelines, ScrollTrigger, plugins, and the right usage in React, Vue, and Svelte.Fit：Install it whenever you use GSAP.MIT · github.com/greensock/gsap-skillsreact-view-transitionsSkillRoute transitions, shared elements, and list reordering with the View Transition API. No third-party library.Fit：Page transitions in Next.js.MIT · github.com/vercel-labs/agent-skillsReact BitsLibraryCopy-in animated bits: type effects, backgrounds, cards, and cursor effects.Fit：One or two accents on a landing page.MIT + Commons Clause · reactbits.devAnime.jsLibraryA small JavaScript animation engine for plain JS and SVG.Fit：Pages that are not React.MIT · animejs.com
How to choose
React projects Start with Motion. If an agent will write it, install Motion AI Kit too.
Complex timelines or scroll stories Choose GSAP and install gsap-skills so the agent does not write outdated Club plugin code.
Next.js page changes Try View Transitions first: native, no dependency, and unsupported browsers skip the animation.
Less is enough One composed motion on a page looks more considered than a fade on every block.