---
name: GSAP
slug: gsap
url: "https://dontmakeitugly.com/resources/gsap"
website: "https://gsap.com"
github: "https://github.com/greensock/GSAP"
docs: "https://gsap.com/docs/v3/"
npm: "https://www.npmjs.com/package/gsap"
type: package
categories:
  - motion
tags:
  - animation
  - scroll
  - timelines
  - svg
  - vanilla
  - framework-agnostic
  - awwwards
frameworks:
  - vanilla
  - agnostic
  - react
pricing: free
license: GSAP Standard License (free to use)
openSource: false
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - npm
installCommand: npm install gsap
difficulty: intermediate
staffPick: true
dateAdded: "2026-09-02"
---

# GSAP

The professional-grade animation toolkit, now free including all plugins.

- Type: Package
- Categories: Motion
- Pricing: Free · License: GSAP Standard License (free to use)
- Open source: no
- Works with: Vanilla JS/CSS, Framework agnostic, React, JavaScript

## What it is

GSAP (GreenSock Animation Platform) is the animation library behind many award-winning websites. Timelines, ScrollTrigger, SplitText, Flip, MorphSVG and the rest are all free to use since Webflow acquired it. It works in any framework or none.

## Why it's here

When you want the scroll-driven, cinematic stuff you see on Awwwards sites, this is the tool. It's more imperative than Motion, so it suits vanilla JS and complex sequences better than routine React UI.

## Best for

- scroll-driven storytelling
- complex animation sequences
- SVG animation
- marketing sites

## Links

- Website: https://gsap.com
- Docs: https://gsap.com/docs/v3/
- GitHub: https://github.com/greensock/GSAP
- npm: https://www.npmjs.com/package/gsap

## Can my agent use this?

Yes. Docs are extensive and well-structured, source is public, and the npm package includes every plugin. Name the plugin you want, for example ScrollTrigger.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Docs, GitHub, npm.
Install: `npm install gsap`

## Prompt to hand your agent

```text
Use GSAP as a design and implementation reference for this project.

What it is: The professional-grade animation toolkit, now free including all plugins.

Website: https://gsap.com
Documentation: https://gsap.com/docs/v3/
GitHub: https://github.com/greensock/GSAP
npm: https://www.npmjs.com/package/gsap
Install: npm install gsap

Use it specifically for:
- scroll-driven storytelling
- complex animation sequences
- SVG animation
- marketing sites

How you can access it: Docs, GitHub, npm.
Works with: Vanilla JS/CSS, Framework agnostic, React.
License: GSAP Standard License (free to use). Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [Lenis](https://dontmakeitugly.com/resources/lenis.md): Smooth scrolling that doesn't fight the browser.
- [Anime.js](https://dontmakeitugly.com/resources/animejs.md): A lightweight, framework-free animation library with a beautiful API.
- [AutoAnimate](https://dontmakeitugly.com/resources/autoanimate.md): One line of code that animates list changes for you.
- [Liquid Glass JS](https://dontmakeitugly.com/resources/liquid-glass-js.md): Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL.

## In collections

- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)

GSAP is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.