GSAP is free now — the three animations to learn first

Every premium GSAP plugin used to sit behind a paid membership. Webflow made all of it free, including the plugins that were previously members-only, under a standard no-charge licence — commercial work included.

It is not a niche library either: around 4.7 million npm downloads a week, 28,000 GitHub stars, and used by over 300,000 projects at the time of writing.

1 · ScrollTrigger

Write a completely normal animation, then hand it a trigger element and scrub. Your scroll bar becomes the playhead. This one property accounts for most of the “premium” feel on modern sites.

gsap.to(".card", {
  y: -80,
  scrollTrigger: {
    trigger: ".card",
    scrub: true,
  },
});

2 · SplitText

Splits a headline into characters, words or lines so you can stagger them instead of fading in the whole block. It was one of the members-only plugins and is now free.

3 · gsap.matchMedia()

One block of code gives you a desktop version, a mobile version, and a reduced-motion version. Most people skip this and ship animation that hurts on a phone and ignores accessibility settings.

Start with scrub before you touch pinning

Pinning is where ScrollTrigger gets fiddly — layout shifts, spacer elements, nested scrollers. A scrubbed animation gets you most of the effect with almost none of the debugging.

The mistake almost everyone makes is animating everything. If it all moves, nothing feels important. The sites you think look expensive are doing three tasteful things, not thirty.