GSAP CDN links for 3.15.0

Load GSAP from jsDelivr with one script tag for the core, https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js, and one more for each plugin, such as https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js. Every plugin is free on the CDN, including the former Club plugins, since GSAP 3.13. Load the core first, then the plugins, then your own script, and call gsap.registerPlugin() before you use one.

Quick start: GSAP and ScrollTrigger

Paste this before the closing </body> tag. It loads the core and ScrollTrigger, registers the plugin and fades a .box up as it scrolls into view.

HTML

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.from('.box', {
    y: 60,
    opacity: 0,
    scrollTrigger: { trigger: '.box', start: 'top 80%' }
  });
</script>

The unminified builds sit at the same paths without .min, which gives readable errors while you develop.

Every GSAP plugin on the CDN

The core and all 23 plugin files for 3.15.0, grouped by job. Each tag carries its Subresource Integrity hash, so the browser refuses the file if a single byte differs from the published release. The same tags without integrity and crossorigin work too.

Core and ScrollTrigger

What most pages need. ScrollTrigger is a separate file and loads after the core.

gsap (core)

The animation engine: tweens, timelines, eases, utilities. Every other file needs it first.

gsap.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js" integrity="sha384-XmJ9SoHtVOHoQUcKvFAzVXwdkKo1Ie3bhmSoIAkcdsHGaIrVJIkmozyq0FJeb/Ly" crossorigin="anonymous"></script>

npm: import { gsap } from 'gsap'

ScrollTrigger

Starts, scrubs and pins animations by scroll position.

ScrollTrigger.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js" integrity="sha384-wl5TeDVvOWt30Pbf8aSo2ZrzsOjddu3avOBvHe+p+OhJt9gP6w9YXmDkN5DK2/dF" crossorigin="anonymous"></script>

npm: import { ScrollTrigger } from 'gsap/ScrollTrigger'

Text

SplitText and ScrambleText were paid Club plugins until GSAP 3.13; both are free on the CDN now.

TextPlugin

Replaces an element's text one character at a time, as a typewriter.

TextPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/TextPlugin.min.js" integrity="sha384-e3M6nPUMXXGtZ6/fy/YTRPfi3W++ew3WMt8dGKl393xd0Ep1UXotcpdtc40cZoST" crossorigin="anonymous"></script>

npm: import { TextPlugin } from 'gsap/TextPlugin'

SplitText

Splits text into characters, words and lines to animate separately.

SplitText.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js" integrity="sha384-SWJ0lLVRoipvHh59xj0pL7uC7Ih51F+5smaFtrG+2nr+TlDZU5SYJHmxfolbeNTr" crossorigin="anonymous"></script>

npm: import { SplitText } from 'gsap/SplitText'

ScrambleTextPlugin

Decodes text through random characters into the final string.

ScrambleTextPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrambleTextPlugin.min.js" integrity="sha384-QQ7Drnaxr6AM+cySvZNVNIFsvXLGtDLoS5tlUIt2XvIwnqtBtuD7A2KwqlSAWMi1" crossorigin="anonymous"></script>

npm: import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin'

Interaction and layout

Dragging, throwing, gestures and layout changes.

Draggable

Makes elements draggable, spinnable or throwable with mouse and touch.

Draggable.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Draggable.min.js" integrity="sha384-k9SCZn5JmxO3oyPDFbaTMy2eSu3WzGB2Qfg+htfhZCEomNh7o48hKFV38IEKsYr0" crossorigin="anonymous"></script>

npm: import { Draggable } from 'gsap/Draggable'

Flip

Animates between two layouts: record the state, change the DOM, animate the difference.

Flip.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Flip.min.js" integrity="sha384-LY8cG/IUULu4u3V3AhwWBt01HIuO/hlekjkqgBx0DOJ/oquEL0Qk2L6qy+1QeRZM" crossorigin="anonymous"></script>

npm: import { Flip } from 'gsap/Flip'

Observer

One listener for wheel, touch and pointer gestures, with direction and velocity.

Observer.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Observer.min.js" integrity="sha384-zIBMtqe+5/TLwKKX87XBGGrUvcvvHV28Wd1Qnw5px5kln2+u3+FyRvvEszk+zn7+" crossorigin="anonymous"></script>

npm: import { Observer } from 'gsap/Observer'

InertiaPlugin

Momentum after release: glides a thrown value to a stop, or to a snap point. Pair with Draggable for throws.

InertiaPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/InertiaPlugin.min.js" integrity="sha384-R8g6f6kDZh4vwaTTVFMOCQ98vOAwhOD3OfjZCIb44f87BERTczxbYSRjRR6+lNdP" crossorigin="anonymous"></script>

npm: import { InertiaPlugin } from 'gsap/InertiaPlugin'

SVG and paths

Strokes, shape morphs and path motion.

MotionPathPlugin

Moves an element along an SVG path or a list of points.

MotionPathPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathPlugin.min.js" integrity="sha384-YAP0gHFFPxr8wOSUhn4e+TuP5bfNLSK+i4tU3G9qh+IDMZRxsjxzPkb+sg037k23" crossorigin="anonymous"></script>

npm: import { MotionPathPlugin } from 'gsap/MotionPathPlugin'

DrawSVGPlugin

Draws or erases an SVG stroke along its length.

DrawSVGPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/DrawSVGPlugin.min.js" integrity="sha384-pfZbCpJUiv0Y8664JafRbiKcx2uJmjNjVCoPXGwaxvTSbO11M0htzeEeTC6KSaqa" crossorigin="anonymous"></script>

npm: import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'

MorphSVGPlugin

Morphs one SVG shape into another, whatever their point counts.

MorphSVGPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.min.js" integrity="sha384-2D9N9SXHI+GuUJosWr9sUo4lNZyaZoOK+kvXEXCL3/h9nrsMDeqDxAennJtVtMtt" crossorigin="anonymous"></script>

npm: import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'

Scroll

ScrollSmoother needs ScrollTrigger loaded first.

ScrollToPlugin

Animates the window or a container to a scroll position or element.

ScrollToPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollToPlugin.min.js" integrity="sha384-veAUjjPpN+DmI16CXyo3Anb29Br9lR3S2f9R3OhNYpaCiUIRwgwiGcQsLT/YTs72" crossorigin="anonymous"></script>

npm: import { ScrollToPlugin } from 'gsap/ScrollToPlugin'

ScrollSmoother

Smooth scrolling on native scroll, with parallax speed and lag per element. Load after ScrollTrigger.

ScrollSmoother.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollSmoother.min.js" integrity="sha384-UBrN+CoHHGgqL39pifrs8DrCpDnJh1YKy4iyhEEV/4e9lLCaStS9toSKHYVYcZlT" crossorigin="anonymous"></script>

npm: import { ScrollSmoother } from 'gsap/ScrollSmoother'

Easing

CustomBounce and CustomWiggle build on CustomEase, so it loads before them.

EasePack

The extra eases RoughEase, SlowMo and ExpoScaleEase.

EasePack.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/EasePack.min.js" integrity="sha384-+vqeSfmZ5lEwVC9RIv2XEvhACJDLrJABov6EpgbyVDL6/wi2Z0hWw6NtMEDyj7pt" crossorigin="anonymous"></script>

npm: import { EasePack } from 'gsap/EasePack'

CustomEase

Any easing curve you can draw, from SVG path data.

CustomEase.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.min.js" integrity="sha384-bk/dsRkKcZYqsQ8OzP86S+TVAAI6D7V0ApKLhj3ssXqZPNYYO77EXxOrTX+pp1g/" crossorigin="anonymous"></script>

npm: import { CustomEase } from 'gsap/CustomEase'

CustomBounce

Bounce eases with a set strength and optional squash. Load after CustomEase.

CustomBounce.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomBounce.min.js" integrity="sha384-tdTdXg9I5qPRgIopFmqar+idKDPzGUAPLdD6RvMR7d1dmM8cSw3JOdHbuT/HBdBe" crossorigin="anonymous"></script>

npm: import { CustomBounce } from 'gsap/CustomBounce'

CustomWiggle

Wiggle and shake eases with a set number of oscillations. Load after CustomEase.

CustomWiggle.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomWiggle.min.js" integrity="sha384-ZmuJAv7/byu3UallBDnGlZCO85upMxDve1rNb0bosoad+fYhh1YIAlba/0A4DkTO" crossorigin="anonymous"></script>

npm: import { CustomWiggle } from 'gsap/CustomWiggle'

Physics

Motion from velocity and forces rather than a fixed end value.

Physics2DPlugin

Velocity, angle, gravity and friction for 2D motion.

Physics2DPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Physics2DPlugin.min.js" integrity="sha384-9e8YXNk18cw39nPRgAKOqFiS1BdEmL00cOyD1lSd1T8Zd+qaL5putYTCSJyKJwiE" crossorigin="anonymous"></script>

npm: import { Physics2DPlugin } from 'gsap/Physics2DPlugin'

PhysicsPropsPlugin

Velocity, acceleration and friction on any numeric property.

PhysicsPropsPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/PhysicsPropsPlugin.min.js" integrity="sha384-hRZeuNPkfZks6PUExNdUW72B/KDJ6fDU0elRjdcOrEQ7tiDUNwdFd54HcbaRh3PB" crossorigin="anonymous"></script>

npm: import { PhysicsPropsPlugin } from 'gsap/PhysicsPropsPlugin'

Canvas renderers

Bridges to a canvas library that must already be on the page.

PixiPlugin

Animates PixiJS display objects with ordinary property names. Needs PixiJS on the page.

PixiPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/PixiPlugin.min.js" integrity="sha384-z8cXBYGBd1KXPk/AdovPP2l5xi3O1NRi2BdFfz86oL05qfksxVtFYAH4y7xm4WAz" crossorigin="anonymous"></script>

npm: import { PixiPlugin } from 'gsap/PixiPlugin'

EaselPlugin

Animates EaselJS (CreateJS) filters and colour properties. Needs EaselJS on the page.

EaselPlugin.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/EaselPlugin.min.js" integrity="sha384-bPIzi4p34ThwhLUxQ670vczY9dNcrhlw++6/h9s1Gs45xxTSTvGVX0cNgChQF3bv" crossorigin="anonymous"></script>

npm: import { EaselPlugin } from 'gsap/EaselPlugin'

Development tools

For building, not shipping.

GSDevTools

A scrubbable timeline panel for inspecting animations while you build. Development only; leave it out of production.

GSDevTools.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/GSDevTools.min.js" integrity="sha384-ttsJf8jFdK4QBOpJmmho8pBhovfr78ARMfSDqew3sPdr13V4a2ZEJpEr4EAxDyYu" crossorigin="anonymous"></script>

npm: import { GSDevTools } from 'gsap/GSDevTools'

MotionPathHelper

Edit a motion path by dragging its points in the browser, then copy the path data. Load after MotionPathPlugin. Development only.

MotionPathHelper.min.js

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathHelper.min.js" integrity="sha384-rHVI02n9pE/DJG67umh+apkrTCsUANYvxnWdTz+Hx11tI8/TFzk15YK9N+dhP/Jw" crossorigin="anonymous"></script>

npm: import { MotionPathHelper } from 'gsap/MotionPathHelper'

npm, ES modules and bundlers

With a build step (Vite, Next.js, Astro, webpack) skip the CDN and install the package. Every plugin is in it; each imports from its own path.

Terminal

npm install gsap

JavaScript

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(ScrollTrigger, SplitText);

Register once, near your app's entry point, before any animation that uses the plugins. In a bundle this is not optional: tree shaking can remove a plugin that is imported but never registered, and the animation then does nothing without an error.

In React, use the useGSAP hook from @gsap/react, which scopes animations to a component and cleans them up when it unmounts. GSAP with React: useGSAP, ScrollTrigger and cleanup walks through it, Next.js included.

Common errors

Nearly every CDN problem is load order or a missing file. Open the Network tab first.

gsap is not defined

Your code ran before the core loaded, or the core never loaded. Check the core tag comes first, that its URL returns a file rather than a 404, and that your own script is below it. Never put async on GSAP tags: async scripts run in whatever order they arrive.

ScrollTrigger is not defined

The same problem one file along: the plugin tag is missing, misspelled (the file names are case-sensitive), or below your script. In a bundled project it usually means the import line is missing.

"Invalid property scrollTrigger" or "Missing plugin?"

GSAP does not know the plugin. Call gsap.registerPlugin(ScrollTrigger) before the first tween that uses it, and check the plugin and core are the same version.

Works inline, breaks with defer

defer only applies to external files. An inline script ignores it and runs immediately, before the deferred GSAP tags. Move your code to a file and defer it too; deferred scripts run in document order.

HTML, in the head

<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script defer src="/js/main.js"></script>

It changed overnight: a floating gsap@3 tag

gsap@3 or gsap@latest resolves to the newest release, so a site can change without a deploy, and the core and a plugin can end up on different versions. Pin the full version, gsap@3.15.0, on every tag, and update them together. An integrity hash only works on a pinned URL.

WordPress, Webflow and Shopify

The tags are the same everywhere; what differs is where each platform lets you put them.

WordPress

Enqueue the CDN files from a child theme or a snippets plugin, with the core as a dependency of each plugin, rather than pasting tags into a page. GSAP in WordPress covers it, and 4 tutorials build complete examples: Staggered grid reveal in WordPress with GSAP, Adding an Infinite Marquee to WordPress, Custom Cursor Effects for WordPress, Adding a Text Scramble Effect to WordPress.

Webflow

Put the tags in the project's Footer Code custom code to load GSAP on every page, or in one page's Before </body> code. Webflow custom animations with GSAP shows both, and when to reach for GSAP over native interactions.

Shopify

Add the tags to theme.liquid before the closing body tag, and re-initialise when the theme editor re-renders a section. Shopify custom animations with GSAP has the details.

See the plugins running

Live pages from the catalogue that load these same CDN files, grouped by the plugin they show off. The free ones come with their full source.

ScrollTrigger

Parallax Hero Free A pinned hero whose layers pull apart into depth as you scroll.
Horizontal Scroll Section Scrolling down pans a row of full-screen panels sideways.

SplitText

Scroll Text Highlight Free A paragraph lights up word by word as you read down it.
Split Text Stagger Reveal Headlines assemble letter by letter from behind a mask.

Flip

Tailwind Component Remixer Free Generated components rearrange with smooth layout transitions.
FLIP Layout Morph A grid tile travels into a detail view while its neighbours reflow.

MorphSVG and DrawSVG

SVG Blob Morph Portraits inside drifting blobs that settle into circles on hover.
Tattoo Studio Template Pick a design off a flash sheet and watch its linework ink itself.

Draggable and Inertia

iOS Toggle Switch Free A toggle you can tap, or drag and let go to snap to a side.
Draggable Card Stack Throw the top card of a deck and momentum decides where it lands.

Browse every effect, filtered by plugin if you are looking for one in particular.

GSAP CDN questions

Is the GSAP CDN free?

Yes. GreenSock describes GSAP as free, including every plugin, and it has been since version 3.13, when the former Club plugins such as SplitText, MorphSVG and ScrollSmoother became public on the CDN. Loading them from jsDelivr needs no account or key. Use is governed by GreenSock's Standard “No Charge” GSAP License, not by anything on this site; read the official text for the terms.

Should I use jsDelivr or cdnjs for GSAP?

Either works; both serve the files published in the gsap npm package. jsDelivr is what the GSAP documentation links to and what the tags on this page use. Whichever you pick, load the core and every plugin from the same CDN at the same version.

Which GSAP version should I use?

Pin an exact version, currently 3.15.0, as in https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js. A floating tag such as gsap@3 resolves to whatever is newest, so a release can change a live site without you deploying anything, and a pinned URL is the only kind an integrity hash can match. Update deliberately, and move the core and plugins together.

Do I need to register plugins loaded by script tag?

Plugin files loaded by script tag after the core try to register themselves, so it usually works without. Call gsap.registerPlugin anyway: it is harmless to repeat, it documents what the code depends on, and it is required once the same code moves to npm and a bundler, where tree shaking can drop an unregistered plugin.

Can I self-host GSAP instead of using a CDN?

Yes. Download the same files, or install the gsap package and copy the files you need from its dist folder, then serve them from your own domain in the same order: core, plugins, your script. Self-hosting removes a third-party request and a dependency on the CDN being reachable, at the cost of updating the files yourself. This site serves its own copy for that reason.

The licence quoted above is GreenSock's, not ours: the Standard “No Charge” GSAP License is the authority on its terms.