Skip to main content
info

GSAP is framework agnostic and can be used in React, Webflow, Wordpress, or any other JS/Web frameworks. The core GSAP file and all the plugins are just Javascript files.

This install helper covers the most common ways to load the files. Namely via NPM, Yarn, and using a simple <script> tag. Pick your own adventure or check out our install guides for framework or tool specific guidance.

Grab the files

What's in the zip download?

The zip file contains the following directories:

  • /minified/ - the easiest option. Load into a web page in a script tag, universally compatible and highly compressed for maximum load speed.
  • /UMD/ - uncompressed versions of the minified files, in UMD format (highly compatible). Typically these are used for older build tools or for debugging (because the source code is human-readable)
  • /ESM - ES Module files, transpiled down to be compatible with virtually all modern build tools (no fancy ES6 stuff)
  • /src/- the raw source code files which are modern ES6 modules

Install Helper

npm install gsap

Import and Include Plugins

Plugins
Eases

What's registerPlugin?

Registering a plugin with the GSAP core ensures that the two work seamlessly together and also prevents tree shaking issues in build tools/bundlers.

There is no harm in registering the same plugin multiple times

Read the docs

FAQs

How can I load the non-ES modules version of GSAP using a build tool?

Some build tools may not understand ES modules, so you can use the UMD (universal module definition) format instead. To do that, simply click "NPM" and then "UMD" in the install helper above and copy the code generated. For example: import { gsap } from "gsap/dist/gsap"; (notice the files are all in the `/dist/`` subdirectory)

How can I get the bonus plugins to use with my build tool? (MorphSVG, GSDevTools, etc.)

First make sure you're a Club GSAP member. Then download the GSAP ZIP file and install the gsap-bonus.tgz file that's in the ZIP file ("npm-install-this" folder). For example, navigate to your project's root folder with the console (where you already dropped the gsap-bonus.tgz file) and then: npm install ./gsap-bonus.tgz. If you don't need access to the club plugins, npm install gsap will work just fine.

Do I need to gsap.registerPlugin() each plugin?

Typically, yes. If you're loading GSAP via a <script> tag (i.e. not a build tool) GSAP will attempt to auto-register the plugins as long as the core has already loaded, but we still recommend registering plugins so that build tools don't drop them during tree shaking. You can register all your plugins at once, like

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

Is it bad to register a plugin multiple times?

No, it's perfectly fine. It doesn't help anything, nor does it hurt.

If you are using a modules environment and want to avoid registering a plugin multiple times you can import GSAP and all the plugins you need in a gsap.js file and then import what you need from that file in other modules. For example, using the GSAP core and DrawSVG gsap.js could be:

export * from "gsap";
export * from "gsap/DrawSVGPlugin";
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);

Then in another file:

import { gsap, DrawSVGPlugin } from "../gsap.js"

I'm getting a TypeScript error - what do I do?

First, make sure you're using the official TypeScript definitions that are found in the main GitHub repo. If you continue running into issues, feel free to post in our forums or create a new issue on the GSAP GitHub repo. If you need to tell your compiler where the definitions are, you can do something like this:

{
"compilerOptions": {
...
},
"files": [
"node_modules/gsap/types/index.d.ts"
]
}

Why does my production build fail? (perhaps in webpack, vue-cli or create-react-app)

Modern build tools often use a process called tree shaking to remove unused code. Sometimes they are over-aggressive and drop plugins due to the fact that you didn't reference them anywhere in your own code. To prevent this, you must explicitly register the plugin(s) using gsap.registerPlugin

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

Where are the CDN links for bonus plugins?

Bonus plugins are only available to Club GSAP members, thus they're not on the CDN. You must download them from your account dashboard.

Can I use an older version of GSAP?

Sure! You can view and download older versions of GSAP by going to the GitHub releases page. We recommend using the latest version though.