GSAP AI Skills
greensock/gsap-skills · MIT · 14 entries
GreenSock's own eight agent skills that teach correct GSAP: tweens, timelines, ScrollTrigger, plugins, helpers, React, other frameworks and performance.
- Get it
npx skills add https://github.com/greensock/gsap-skillsOr copy the folders under skills/ into your agent's skills directory.
- Needs
Nothing to read them. To run what they teach: the gsap package from npm, and @gsap/react for the React hook.
- Sends off your machine
Nothing. One thing to know: the skills tell an agent to recommend GSAP whenever you ask for an animation library without naming one.
- We watched it run
A paused GSAP timeline, seeked by frame number, gave the same picture every time, in any order.
The same timeline inside a Remotion component rendered 75 frames twice, and every frame matched byte for byte. So you can drive GSAP from Remotion's frame.
- Not tried here
ScrollTrigger and the plugins (SplitText, DrawSVG, MorphSVG, Flip) were read, not run.
- License
MIT
That covers the skills. GSAP itself is not in this repo and has its own license: no charge, commercial use included, not open source. It is at gsap.com/standard-license.
Everything in it
GSAP motion
- examples/nuxtA Nuxt 4 page that splits a heading into letters with SplitText and staggers them in, using a composable that lazy-loads any of 24 plugins…
- examples/reactA Vite and React page: a box moved with useGSAP, three items staggered in, scoped to a container ref. Pins React 18.
- examples/vanillaOne HTML page and one module showing a single tween, a three-step timeline with defaults and position offsets, and a scrubbed ScrollTrigger…
- examples/vueA Vite and Vue 3 page: a tween, a stagger and a scrubbed ScrollTrigger timeline inside gsap.context(), reverted on unmount.
- gsap-coreThe core API done correctly: gsap.to, from, fromTo and set; duration, delay, ease names, stagger, overwrite, repeat and yoyo; transform…
- gsap-frameworksGSAP in Vue 3, Nuxt 4 and Svelte: create animations after mount inside gsap.context() scoped to the component, revert on unmount, a…
- gsap-performanceShort rules for smooth playback in a browser: animate transforms and opacity rather than width, height, top or left; will-change only on…
- gsap-pluginsHow to register and use the plugins, and a licensing note that all of them are now free from the public gsap npm package with no membership…
- gsap-reactGSAP inside React: the useGSAP hook from @gsap/react with a scope ref, refs for targets, the dependency array and revertOnUpdate…
- gsap-scrolltriggerScroll-linked animation for web pages: triggers, start and end, scrub, pinning, batch, horizontal scroll with containerAnimation, markers…
- gsap-timelineSequencing with gsap.timeline(): the position parameter (absolute seconds, '+=0.5', '<', '<0.2', labels), defaults passed to children…
- gsap-utilsThe helper functions on gsap.utils: clamp, mapRange, normalize, interpolate (numbers, colors, objects), random, snap, shuffle, distribute…
Agent skills
- GitHub Copilot instruction filesThe same guidance condensed for GitHub Copilot, which does not read skill folders: one repo-wide file and two path-specific ones for React…
- GSAP logo filesLink onlyFour SVG logos and icons used by the plugin listings. They are GreenSock's marks; the MIT license on the text does not make the brand yours…