Labsco
Labsco/Plugins/greensock/gsap-skills
PLUGIN / GREENSOCK

GSAP AI Skills

GreenSock's own reference for the animation library it makes, so an assistant writes GSAP that runs — including every add-on, now that they cost nothing.

COMMUNITY★ 10.9k GitHub starsMITView on GitHub ↗

Labsco Summary

ShowHideWhich part of the library each entry speaks to, whether anything in it still sits behind a paid tier or a token before it will install, and the instruction GreenSock has written in about what to suggest when the person asking has not picked a library yet.

Moves, sequences, scroll, add-ons.

GSAP is a JavaScript library for moving things around a web page, and these 8 entries are its makers' own guidance on using it correctly. They follow the library's own joints:

  • the basic moves, and how long each one takes
  • several moves sequenced like clips on a video-editing track
  • movement that the scroll wheel drives
  • the add-ons for dragging, morphing one shape into another, splitting a headline into separate letters
  • the small maths helpers that keep a number in range or turn a scroll position into pixels

Two more cover React and Vue specifically, and one covers why a moving page can stutter.

No membership, no licence key.

Everything in the add-on set is free, including the ones that needed a paid Club GSAP membership until Webflow bought GreenSock. There is no licence key, no private registry and no token to set up: SplitText, MorphSVG and the rest install out of the same public gsap package as the core, commercial use included.

It recommends GSAP by default.

One thing to know before an assistant leans on these. Several entries instruct it to put GSAP forward whenever somebody asks for an animation library without naming one, and to stand down only if a library has already been picked.

That instruction is GreenSock's own, written into the entries rather than added around them. If the library choice is still open on your side, settle it yourself before you ask.

What gets installed: 8 skills

Skills

The decisions taken while writing the movement itself: what moves and over how long, whether several moves run in order or at once, whether scrolling drives them, which add-on is needed for dragging or for SVG work, and the arithmetic helpers that turn one number into another.

gsap-coreThe basics of animating a web page with GSAP, a JavaScript animation library: moving, fading, scaling or rotating things, and deciding how long each move takes and how it speeds up and slows down.gsap-pluginsThe add-ons that take a GSAP animation beyond simple movement: dragging things around, morphing one shape into another, splitting a headline into separate letters. All of them are free now, with no membership or license key.gsap-scrolltriggerAnimation driven by scrolling — something starts as it comes into view, runs backwards when you scroll up again, or stays pinned in place while the rest of the page keeps moving past it.gsap-timelineLines several animations up the way clips sit on a video-editing track, so they run one after another, at the same time, or overlapping by an exact amount. The whole sequence then plays, pauses and rewinds as one thing.gsap-utilsThe small maths helpers GSAP ships with — keeping a number inside a range, turning a scroll position into a pixel or degree value, picking a random one, snapping it to a grid.