1 | # GSAP (GreenSock Animation Platform)
|
2 |
|
3 | #### Professional-grade animation for the modern web
|
4 |
|
5 | GSAP is a JavaScript library for building 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! The <a href="https://greensock.com/scrolltrigger">ScrollTrigger</a> plugin lets you create jaw-dropping scroll-based animations with minimal code. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on millions of 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! See https://greensock.com/why-gsap/ for what makes GSAP so special.
|
6 |
|
7 | ### What is GSAP? (video)
|
8 |
|
9 | [![What is GSAP?](http://greensock.com/_img/github/thumb-what-is-gsap-small.jpg)](http://www.youtube.com/watch?v=RYuau0NeR1U)
|
10 |
|
11 |
|
12 | GSAP is completely flexible; sprinkle it wherever you want. **Zero dependencies.**
|
13 |
|
14 | There are many optional <a href="https://greensock.com/gsap-plugins/">plugins</a> and <a href="https://greensock.com/ease-visualizer/">easing</a> functions for achieving advanced effects easily like <a href="https://greensock.com/morphsvg">morphing</a>, <a href="https://greensock.com/docs/v3/Plugins/ScrollTrigger">scrolling</a>, or animating along a <a href="https://greensock.com/docs/v3/Plugins/MotionPathPlugin">motion path</a>.
|
15 |
|
16 | ## Docs & Installation
|
17 | View the <a href="https://greensock.com/docs">full documentation here</a>, including an <a href="https://greensock.com/install">installation guide</a> with videos.
|
18 |
|
19 | ### CDN
|
20 | ```html
|
21 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
|
22 | ```
|
23 | Click the green "Get GSAP Now" button at <a href="https://greensock.com/?download=GSAP-JS">greensock.com</a> for more options and installation instructions, including CDN URLs for various plugins.
|
24 |
|
25 | **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).
|
26 |
|
27 | ### NPM
|
28 | See the <a href="https://greensock.com/docs/v3/Installation#npm">guide to using GSAP via NPM here</a>.
|
29 |
|
30 | ```javascript
|
31 | npm install gsap
|
32 | ```
|
33 | The default (main) file is **gsap.js** which includes most of the eases as well as the core plugins like CSSPlugin, AttrPlugin, SnapPlugin, ModifiersPlugin, and all of the <a href="https://greensock.com/docs/v3/GSAP/UtilityMethods">utility methods</a> like interpolate(), mapRange(), etc.
|
34 | ```javascript
|
35 | // typical import
|
36 | import gsap from "gsap";
|
37 |
|
38 | // or get other plugins:
|
39 | import Draggable from "gsap/Draggable";
|
40 | import ScrollTrigger from "gsap/ScrollTrigger";
|
41 |
|
42 | // or all tools are exported from the "all" file (excluding bonus plugins):
|
43 | import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
|
44 |
|
45 | // don't forget to register plugins
|
46 | gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin);
|
47 | ```
|
48 | 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.
|
49 |
|
50 | Download <a href="https://greensock.com/club/">Club GreenSock</a> members-only plugins from your GreenSock.com account and then include them in your own JS payload. There's even a <a href="https://www.youtube.com/watch?v=znVi89_gazE">tarball file you can install with NPM/Yarn</a>. Post questions in our <a href="https://greensock.com/forums/">forums</a> and we'd be happy to help.
|
51 |
|
52 |
|
53 | ### Getting Started (includes video)
|
54 |
|
55 | [![Getting Started with GSAP](http://greensock.com/_img/github/thumb-getting-started-small.gif)](http://greensock.com/get-started)
|
56 |
|
57 | ### ScrollTrigger
|
58 |
|
59 | If you're looking to do scroll-driven animations, GSAP's <a href="https://greensock.com/scrolltrigger">ScrollTrigger</a> plugin is a great option.
|
60 |
|
61 | [![ScrollTrigger](http://greensock.com/_img/github/thumb-scrolltrigger-small.gif)](http://greensock.com/scrolltrigger)
|
62 |
|
63 |
|
64 | ### Resources
|
65 |
|
66 | * <a href="https://greensock.com/">GSAP home page</a>
|
67 | * <a href="https://greensock.com/get-started/">Getting started guide</a>
|
68 | * <a href="https://greensock.com/docs/">Docs</a>
|
69 | * <a href="https://greensock.com/cheatsheet">Cheat sheet</a>
|
70 | * <a href="https://greensock.com/forums/">Forums</a>
|
71 | * <a href="https://greensock.com/showcase">Showcase</a>
|
72 | * <a href="https://greensock.com/why-gsap/">Why GSAP?</a> (convince your boss)
|
73 | * <a href="https://greensock.com/stagger">Staggering animations in GSAP 3</a>
|
74 | * <a href="https://greensock.com/draggable/">Draggable</a>
|
75 | * <a href="https://greensock.com/club/">Club GreenSock</a> (get access to bonus plugins not in this repository)
|
76 |
|
77 | ### Get CustomEase for free
|
78 | Sign up for a free GreenSock account to gain access to <a href="https://greensock.com/customease/">CustomEase</a> which lets you create literally any ease imaginable (unlimited control points). It's in the <a href="https://greensock.com/install">download zip at GreenSock.com</a> (when you're logged in).
|
79 |
|
80 | ### What is Club GreenSock? (video)
|
81 |
|
82 | [![What is Club GreenSock?](http://greensock.com/_img/github/thumb-what-is-club-greensock-small.jpg)](http://www.youtube.com/watch?v=Ome_KnloOhs)
|
83 |
|
84 | <a href="https://greensock.com/club/">Sign up</a> anytime.
|
85 |
|
86 | ### Advanced playback controls & debugging
|
87 |
|
88 | <a href="https://greensock.com/gsdevtools/">GSDevTools</a> adds a visual UI for controlling your GSAP animations which can significantly boost your workflow and productivity. (<a href="https://greensock.com/club">Club GreenSock</a> membership required, not included in this repository).
|
89 |
|
90 | ### Try all bonus plugins for free on Codepen
|
91 | <a href="https://codepen.io/GreenSock/full/OPqpRJ">https://codepen.io/GreenSock/full/OPqpRJ</a>
|
92 |
|
93 | ### Need help?
|
94 | <a href="https://greensock.com/forums/">GreenSock forums</a> are an excellent resource for learning and getting your questions answered. Report any bugs there too please (it's also okay to <a href="https://github.com/greensock/GSAP/issues">file an issue on Github</a> if you prefer).
|
95 |
|
96 | ### License
|
97 | GreenSock's standard "no charge" license can be viewed at <a href="https://greensock.com/standard-license">http://greensock.com/standard-license</a>. <a href="https://greensock.com/club/">Club GreenSock</a> members are granted additional rights. See <a href="https://greensock.com/licensing/">http://greensock.com/licensing/</a> for details. Why doesn't GreenSock use an MIT (or similar) open source license, and why is that a **good** thing? This article explains it all: <a href="https://greensock.com/why-license/" target="_blank">http://greensock.com/why-license/</a>
|
98 |
|
99 | Copyright (c) 2008-2020, GreenSock. All rights reserved. |
\ | No newline at end of file |