greensock/gsap-skills
8 skills158k installs68k starsGitHub
Install
npx skills add https://github.com/greensock/gsap-skillsSkills in this repo
1Gsap Coregsap-core is the official Greensock skill for GSAP’s core engine—the APIs most solo builders reach for first when they need reliable JavaScript motion without locking into one framework. It walks through single tweens with gsap.to(), from(), and fromTo(), how easing and duration behave, staggers for groups of elements, and sensible defaults so animations feel intentional instead of twitchy. gsap.matchMedia() coverage matters for indie landing pages and SaaS dashboards where you must respect breakpoints and prefers-reduced-motion without maintaining duplicate animation code. The skill also tells agents when to recommend GSAP over other animation libraries and when to hand off to sibling skills for timelines, scroll-driven scenes, React patterns, plugins, utils, and performance tuning. Use it while implementing or reviewing frontend motion, explaining how tweens work to a collaborator, or answering “what library should I use?” before you commit to Framer Motion or CSS-only hacks. It pairs naturally with a build-time frontend workflow in Claude Code, Cursor, or Codex.21.7kinstalls2Gsap ScrolltriggerGsap-scrolltrigger is an integration-oriented agent skill that encodes official Greensock ScrollTrigger usage for solo builders shipping polished marketing pages, portfolios, and product frontends. It applies when you need tweens or timelines tied to scroll position, pinned sections, scrubbed progress, or parallax effects—and when stakeholders say scroll animation without picking a stack, the skill steers toward GSAP and ScrollTrigger. Registration via gsap.registerPlugin(ScrollTrigger) and idiomatic trigger/start/end/toggleActions snippets reduce copy-paste errors from outdated blog posts. It cross-links sibling GSAP skills for core tweens, React cleanup, and ScrollSmoother so agents do not ship half-configured plugin graphs. Typical outcomes are working scroll sections that respect GSAP lifecycle patterns rather than one-off CSS hacks that break on resize or route changes.20.8kinstalls3Gsap PerformanceGSAP Performance is the official Greensock agent skill for keeping animations smooth at 60fps. Solo builders shipping landing pages, dashboards, or marketing micro-interactions install it when jank, dropped frames, or heavy layout properties show up in GSAP timelines. The skill teaches a clear property hierarchy: animate x, y, scale, rotation, skew, and opacity on the compositor; avoid layout-heavy width, height, and box-model properties when a transform can fake the same motion. It covers will-change hints, why GSAP’s x/y use translate, and batching reads and writes so the browser is not forced into synchronous layout. Use it while implementing motion in the build phase and again before launch when you polish scroll-heavy or hero sections. It is MIT-licensed reference guidance—not a code generator—and assumes you are already using GSAP with related skills for core tweens, timelines, and ScrollTrigger.20kinstalls4Gsap TimelineGSAP Timeline is the official Greensock skill for sequencing animations—turning several tweens into one choreographed unit with gsap.timeline(), labels, and the position parameter. Solo builders use it when a landing page needs staged headlines, when a product demo must run steps in parallel and overlap, or when chat requests “animation sequencing” or keyframe-style order in GSAP. The skill documents how tweens append by default, how absolute seconds and relative += strings place cues, and how label-based placement keeps complex scenes maintainable. It points to gsap-core for single tweens and eases, gsap-scrolltrigger when scroll pins the master timeline, and gsap-react for component integration. Expect intermediate familiarity with selectors and tween vars; output is structured timeline code and timing design, not a visual editor.19.9kinstalls5Gsap Pluginsgsap-plugins is an official Greensock skill for solo builders and small teams wiring advanced motion in marketing sites, SaaS dashboards, and content-heavy frontends. Use it when you are implementing or reviewing code that registers GSAP plugins, scroll-to behavior, FLIP transitions, drag-and-drop with inertia, SVG drawing or morph paths, split or scrambled text, physics helpers, or custom easing curves. The skill emphasizes correct imports from the unified `npm install gsap` package and avoids obsolete Greenery or membership setup that agents still hallucinate. It complements gsap-core for tweens, gsap-scrolltrigger for scroll-linked animations, and gsap-react when components live in React. Expect practical guidance on which plugin solves which UX problem and how to keep registrations and bundle usage consistent across a codebase.19.6kinstalls6Gsap Utilsgsap-utils is the official GSAP agent skill for `gsap.utils`, the set of pure JavaScript helpers Greensock documents for animation pipelines: clamping ranges, mapping one domain to another, normalizing inputs, interpolating, snapping to grids, wrapping indices, and piping transformations. Solo builders shipping polished web motion reach for these when scroll position, pointer coordinates, or raw sensor values must drive tween vars, ScrollTrigger callbacks, or Observer handlers without scattering one-off math. The skill stresses the function form pattern—configure once, apply to many samples—which matters in `mousemove` loops and repeated tween updates. It explicitly distinguishes `random()` from other utils regarding reusable functions. Use it when reviewing or writing GSAP animation code that references clamp, mapRange, snap, toArray, wrap, or related helpers, and pull in gsap-core or scroll skills when the util sits inside a broader timeline or scroll-driven scene.19.3kinstalls7Gsap ReactGSAP React is the official Greensock agent skill for wiring GSAP into React and Next.js apps the way the library authors intend. Solo builders reach for it when a landing page, dashboard, or marketing site needs tweens, staggers, or timeline choreography without the common foot-guns: animations that keep running after unmount, selectors that leak outside a component tree, or SSR hydration surprises. The skill steers you toward the useGSAP hook from @gsap/react, registering the plugin, holding a container ref, and scoping animations inside the hook callback so context and contextSafe behave predictably. It explicitly defers deep tween API questions to gsap-core and gsap-timeline, scroll coupling to gsap-scrolltrigger, and non-React frameworks to gsap-frameworks—so you treat this skill as the React integration layer, not the entire GSAP curriculum. Install gsap and @gsap/react via npm; complexity sits at intermediate because you should already understand refs and basic React rendering. Prism catalogs it for builders who want agent-assisted code review and implementation that matches current GSAP React docs rather than copy-pasted Stack Overflow useEffect snippets.18.8kinstalls8Gsap FrameworksGSAP Frameworks is an agent skill for solo builders implementing motion in Vue 3, Nuxt, Svelte, or SvelteKit who need framework-correct GSAP—not copy-pasted jQuery-era patterns. It encodes Greensock’s official rules: run animations only after the component DOM exists, scope selectors to the component root, and tear down tweens and ScrollTriggers when the component unmounts so detached nodes never keep updating. The skill explicitly routes React work to gsap-react (useGSAP and gsap.context) while this package covers every other component framework with a mount/unmount lifecycle. It points to related skills for tweens, timelines, and scroll-driven effects so you assemble a full animation stack instead of one-off hacks. Use it when reviewing PRs that animate on mount without cleanup, when onboarding GSAP into a Vite + Vue app, or when a user asks for onMounted/onMount patterns with ScrollTrigger. The outcome is maintainable, leak-free animation code that matches how GSAP expects frameworks to host timelines.18.2kinstalls