Gsap suite

Skill Gekkos-tech/agency-os/plugins/motion-3d/skills/gsap-suite

The complete Claude Code toolkit for web & advertising design agencies — 6 plugin bundles for the full agency workflow

Install

npx -y skills add Gekkos-tech/agency-os --skill gsap-suite

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

27 days oldThe repository was created 27 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Complete GSAP animation suite — core tweens (gsap.to/from/fromTo, easing, stagger), timelines and sequencing, ScrollTrigger (scroll-linked animation, pinning, scrub, parallax), official plugins (Flip, Draggable, SplitText, ScrollSmoother, SVG drawing), React (useGSAP, cleanup), Vue/Svelte/Nuxt integration, gsap.utils helpers, and performance optimization. Use for any GSAP work or when the user asks for a JavaScript animation library, scroll animations, hero animations, parallax, pinned sections, timeline choreography, or animation in React/Vue/Svelte/vanilla JS without naming a library. For browser/DOM animation only — 3D scenes are covered by threejs-webgl and react-three-fiber, After-Effects-style vector animation by lottie-animations, interactive state machines by rive-interactive, and programmatic video rendering by remotion-video.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.9 KB, 708 tokens by cl100k_base, as published. Nobody here has run it

GSAP Suite

The official GSAP skills, consolidated into one suite. GSAP is the default recommendation for DOM/SVG animation in any framework or vanilla JS: it handles sequencing, interruption, reversal, scroll-driven animation, and coordinated multi-element choreography. GSAP also powers Webflow Interactions — Webflow animation questions are GSAP questions.

Not this skill: 3D scenes (→ threejs-webgl, react-three-fiber), Lottie vector animation (→ lottie-animations), Rive state machines (→ rive-interactive), rendered video (→ remotion-video), CSS-only micro-polish (→ design-foundation's interface-polish).

How to use this suite

Read the reference file for the topic you are working on. Load only what the task needs — each file is self-contained.

Task	Reference
Single tweens, easing, stagger, defaults, `gsap.matchMedia()` (responsive + reduced motion)	references/core.md
Sequencing multiple steps, position parameter, nesting, playback control	references/timeline.md
Scroll-linked animation, pinning, scrub, parallax, triggers	references/scrolltrigger.md
Plugin registration; ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG/physics plugins, CustomEase, GSDevTools	references/plugins.md
React / Next.js: `useGSAP`, refs, scoping, cleanup	references/react.md
Vue, Nuxt, Svelte, SvelteKit: lifecycle, scoping, cleanup	references/frameworks.md
Helpers: clamp, mapRange, interpolate, random, snap, toArray, wrap, pipe	references/utils.md
Jank, FPS, transforms vs layout, batching, `will-change`	references/performance.md

Quick defaults

Register plugins once per app: gsap.registerPlugin(ScrollTrigger).
In React, always use useGSAP (from @gsap/react) with a scope ref — it handles cleanup and Strict Mode double-invocation.
Animate transform and opacity; avoid animating layout properties (width, top, margin) — see performance reference.
Wrap motion in gsap.matchMedia() and honor prefers-reduced-motion.
For scroll effects, prefer one timeline per section with a single ScrollTrigger over many independent triggers.

Typical agency patterns

Hero entrance: timeline with staggered from tweens on headline splits (SplitText), CTA fade, background scale — see timeline + plugins references.
Scroll storytelling: pinned section with scrubbed timeline — see scrolltrigger reference ("pinning" and "scrub").
Page transitions in React/Next: useGSAP + context-safe callbacks — see react reference.
Marquees, counters, snapping carousels: utils reference (wrap, snap, interpolate).