93 lines
6.0 KiB
Markdown
93 lines
6.0 KiB
Markdown
# GSAP (GreenSock Animation Platform)
|
|
|
|
[](http://gsap.com)
|
|
|
|
GSAP is a **framework-agnostic** JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! GSAP's <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">ScrollTrigger</a> plugin delivers jaw-dropping scroll-based animations with minimal code. <a href="https://gsap.com/docs/v3/GSAP/gsap.matchMedia()">gsap.matchMedia()</a> makes building responsive, accessibility-friendly animations a breeze.
|
|
|
|
No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 12 million sites. GSAP works around countless browser inconsistencies; your animations ***just work***. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery!
|
|
|
|
GSAP is completely flexible; sprinkle it wherever you want. **Zero dependencies.**
|
|
|
|
There are many optional <a href="https://gsap.com/docs/v3/Plugins">plugins</a> and <a href="https://gsap.com/docs/v3/Eases">easing</a> functions for achieving advanced effects easily like <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">scrolling</a>, <a href="https://gsap.com/docs/v3/Plugins/MorphSVGPlugin">morphing</a>, [text splitting](https://gsap.com/docs/v3/Plugins/SplitText), animating along a <a href="https://gsap.com/docs/v3/Plugins/MotionPathPlugin">motion path</a> or <a href="https://gsap.com/docs/v3/Plugins/Flip/">FLIP</a> animations. There's even a handy <a href="https://gsap.com/docs/v3/Plugins/Observer/">Observer</a> for normalizing event detection across browsers/devices.
|
|
|
|
|
|
### Get Started
|
|
|
|
[](http://gsap.com/get-started)
|
|
|
|
|
|
## Docs & Installation
|
|
|
|
View the <a href="https://gsap.com/docs">full documentation here</a>, including an <a href="https://gsap.com/install">installation guide</a>.
|
|
|
|
### CDN
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13/dist/gsap.min.js"></script>
|
|
```
|
|
|
|
See <a href="https://www.jsdelivr.com/gsap">JSDelivr's dedicated GSAP page</a> for quick CDN links to the core files/plugins. There are more <a href="https://gsap.com/install">installation instructions</a> at gsap.com.
|
|
|
|
**Every major ad network excludes GSAP from file size calculations** and most have it on their own CDNs, so contact them for the appropriate URL(s).
|
|
|
|
### NPM
|
|
See the <a href="https://gsap.com/install">guide to using GSAP via NPM here</a>.
|
|
|
|
```javascript
|
|
npm install gsap
|
|
```
|
|
|
|
GSAP's core can animate almost anything including CSS and attributes, plus it includes all of the <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods">utility methods</a> like <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods/interpolate()">interpolate()</a>, <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange()">mapRange()</a>, most of the <a href="https://gsap.com/docs/v3/Eases">eases</a>, and it can do snapping and modifiers.
|
|
|
|
```javascript
|
|
// typical import
|
|
import gsap from "gsap";
|
|
|
|
// get other plugins:
|
|
import ScrollTrigger from "gsap/ScrollTrigger";
|
|
import Flip from "gsap/Flip";
|
|
import Draggable from "gsap/Draggable";
|
|
|
|
// or all tools are exported from the "all" file (excluding members-only plugins):
|
|
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
|
|
|
|
// don't forget to register plugins
|
|
gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin);
|
|
```
|
|
|
|
The NPM files are ES modules, but there's also a /dist/ directory with <a href="https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/">UMD</a> files for extra compatibility.
|
|
|
|
## GSAP is FREE!
|
|
|
|
Thanks to [Webflow](https://webflow.com), GSAP is now **100% FREE** including ALL of the bonus plugins like [SplitText](https://gsap.com/docs/v3/Plugins/SplitText), [MorphSVG](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin), and all the others that were exclusively available to Club GSAP members. That's right - the entire GSAP toolset is FREE, even for commercial use! 🤯 Read more [here](https://webflow.com/blog/gsap-becomes-free)
|
|
|
|
### ScrollTrigger & ScrollSmoother
|
|
|
|
If you're looking for scroll-driven animations, GSAP's <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">ScrollTrigger</a> plugin is the standard. There's a companion <a href="https://gsap.com/docs/v3/Plugins/ScrollSmoother/">ScrollSmoother</a> as well.
|
|
|
|
[](https://gsap.com/docs/v3/Plugins/ScrollTrigger)
|
|
|
|
### Using React?
|
|
|
|
There's a <a href="https://www.npmjs.com/package/@gsap/react">@gsap/react</a> package that exposes a `useGSAP()` hook which is a drop-in replacement for `useEffect()`/`useLayoutEffect()`, automating cleanup tasks. Please read the <a href="https://gsap.com/react">React guide</a> for details.
|
|
|
|
### Resources
|
|
|
|
* <a href="https://gsap.com/">gsap.com</a>
|
|
* <a href="https://gsap.com/get-started/">Getting started guide</a>
|
|
* <a href="https://gsap.com/docs/">Docs</a>
|
|
* <a href="https://gsap.com/demos">Demos & starter templates</a>
|
|
* <a href="https://gsap.com/community/">Community forums</a>
|
|
* <a href="https://gsap.com/docs/v3/Eases">Ease Visualizer</a>
|
|
* <a href="https://gsap.com/showcase">Showcase</a>
|
|
* <a href="https://www.youtube.com/@GreenSockLearning">YouTube Channel</a>
|
|
* <a href="https://gsap.com/cheatsheet">Cheat sheet</a>
|
|
* <a href="https://webflow.com">Webflow</a>
|
|
|
|
### Need help?
|
|
Ask in the friendly <a href="https://gsap.com/community/">GSAP forums</a>. Or share your knowledge and help someone else - it's a great way to sharpen your skills! Report any bugs there too (or <a href="https://github.com/greensock/GSAP/issues">file an issue here</a> if you prefer).
|
|
|
|
### License
|
|
GreenSock's standard "no charge" license can be viewed at <a href="https://gsap.com/standard-license">https://gsap.com/standard-license</a>.
|
|
|
|
Copyright (c) 2008-2025, GreenSock. All rights reserved. |