Stop Shipping Websites That Look Five Years Old

A free repo from the team behind GSAP teaches your AI coding assistant to animate like a senior developer. You drop it into your project once, then describe what you want in plain English. Setup runs in about ten minutes and works in Claude Code or Cursor.

Ask your AI to animate a landing page and watch what comes back. A heading that fades in. A card that slides up when you scroll. It works, technically. It also looks like every free template from 2018.

The reason is simple. The model has read a million animation tutorials and most of them were bad. So it copies the average. The average is clunky.

This fixes the input. Instead of guessing, your AI reads a set of instructions written by the people who build the animation library itself. The output changes on the first prompt.

Read This First: GSAP Is Now Free

For years, the best plugins in GSAP sat behind a paid membership. SplitText for animating individual letters. MorphSVG for shape morphs. If you wanted the good stuff, you paid.

That changed. Webflow acquired GreenSock, the company that makes GSAP, and made the whole thing free. Every plugin ships in the public package now, with no license key and no account gate.

This matters for what follows. The repo assumes you can use all of it, because now you can. Nobody hits a paywall halfway through a build.

What Is GSAP Skills?

GSAP Skills is a free, open-source package on GitHub, built by GreenSock. It is a folder of instructions that you install into your AI coding assistant. Once installed, your AI knows how to write GSAP animations correctly instead of guessing at them. It is licensed MIT, so you can use it in client work without asking anyone.

The package is not one giant file. It is split into eight focused skills, each covering a different part of the animation toolkit. Your AI pulls the right one for the job.

You do not need to read any of them. Your AI does that. You need to know they exist so you can ask for the right thing.

Why Your AI Animates Badly Without This

The problem is not that the model is dumb. The problem is what it learned from.

GSAP is over a decade old. The internet is full of outdated snippets, deprecated syntax, and copy-paste answers that half-worked in 2016. When you ask a plain model to animate a section, it averages all of that. You get a fade with the wrong easing and a scroll effect that fires twice.

A senior developer does not average tutorials. They know the current API and the small choices that make motion feel expensive instead of cheap. This repo hands that knowledge to your AI directly. The difference on screen is the difference between a page that feels stiff and one that feels alive.

If you build sites for clients, this is not a cosmetic detail. It is the line between a basic-builder rate and a premium-design rate. Same tool, same hours, different bill.

Install It Once

Pick the path that matches your setup. Each is one action.

If You Use Claude Code

Run this in your project:

/plugin marketplace add greensock/gsap-skills

Claude Code pulls the skills in and can use them from your next message.

If You Use Cursor

Go to Settings, then Rules, then Add Rule, then Remote Rule (Github). In the field, enter:

greensock/gsap-skills

Cursor loads the same instructions as project rules.

If You Use Any Other Agent

The repo ships a one-line installer that works across most coding assistants:

npx skills add https://github.com/greensock/gsap-skills

Or copy the skills/ folder out of the repo into your agent's skill directory by hand. The location depends on the tool.

Done. The skills are installed. Nothing else to configure.

Your First Real Run

Do not start with the whole site. Start with one section so you can see the change clearly.

Open a project that already has a hero section, then paste this.

Copy The Animation Brief

Use the GSAP skills you have installed. On my [HERO SECTION], add a
scroll-triggered reveal. The heading fades up first, then the
sub-text and button stagger in behind it, over about 0.6 seconds
total. Use ScrollTrigger so it fires the moment the section enters
the viewport, and make sure it only plays once. Keep it subtle. When
you are done, tell me which GSAP skill you used and why.

Reload the page and scroll to the section. The motion should feel deliberate, not decorative. If it does not, you correct it in plain words. When something is off, say exactly what is wrong:

That one sentence is the whole loop. You describe the result you want, the AI writes the GSAP, you judge it on screen, you send it back. You never touch the animation code yourself.

What To Build With It

Once the first section works, the same loop scales to the pieces that make a site feel finished. Think about the moments a client actually looks at when they decide whether the work looks premium.

Scroll reveals. Sections that animate in as the visitor scrolls to them, instead of sitting there flat. This is the single upgrade that reads as "professional" to someone who cannot name why. It is usually the first thing a client points at and says the site feels expensive.

Page transitions. Smooth handoffs between pages so navigation feels like an app, not a hard refresh. On a portfolio or a product site, this is what separates a build from a template.

Staggered lists. Team grids, feature cards, and pricing tables that cascade in one after another instead of appearing all at once. The same content, released in sequence, reads as designed rather than dumped on the page.

Text effects. Headings that split into individual words or letters and animate in, using SplitText, the plugin that used to cost money. Used once at the top of a page, it sets the tone for everything below it.

Every one of these is a prompt, not a coding task. You describe the result, your AI writes the GSAP, you judge it on screen. You are directing, not building.

Here is the part worth sitting with. You did not change your process. You did not learn a new library. You added one file to a project you already knew how to build, and the ceiling on what you can charge for it moved. Same project, one extra skill, a different tier of work.

Honest: The Limits You Should Know

This is a real tool with real edges. Here is where it stops.

1. It teaches, it does not do. The repo makes your AI write good GSAP. It does not write your site for you. You still need a project, a design idea, and the judgment to say when motion is too much.

2. More motion is not better. The fastest way to make a site look cheap again is to animate everything. Clients notice restraint more than they notice effects. Use it where movement earns attention, and leave the rest still.

3. It assumes GSAP is the right choice. If your project already animates with a different library, adding this on top invites conflicts. Pick one motion approach per site.

4. The taste is still yours. The skills give your AI correct technique. They do not give it your eye for what a specific brand should feel like. That part does not come from a repo.

If you want the other common route, animating in React with Framer Motion instead of GSAP, I cover that stack in the four-part Claude web design setup, so I will not double up on it here. And if the word "skill" is new to you, this walkthrough of a full skills package explains what they are and how your AI loads them.

The One Thing To Do This Week

Install the repo and animate a single hero section. Not the whole site. One section, one scroll reveal, ten minutes.

You are looking for one thing: does the motion make the page feel more expensive than it did before. If it does, you have found a repeatable way to raise the quality of every site you ship, without learning to write animation code.

If it does not land, you spent ten minutes and you delete one file. That is the entire downside.