Getting Started with GSAP

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See “Why GSAP?” to learn why it’s used by over 8,000,000 sites and every major brand.

Quick links

• Loading GSAP
• Tweening Basics
• CSSPlugin
• 2D and 3D transforms
• Easing
• Callbacks
• Sequencing with Timelines
• Timeline control
• Getter / Setter methods
• Club GreenSock

What’s GSAP Exactly?

GSAP is a suite of tools for scripted animation. It includes:

• TweenLite
• TweenMax
• TimelineLite & TimelineMax
• Extras like easing tools, plugins, utilities like Draggable, and more

CDN

The simplest way to load GSAP is from the CDN with a <script> tag. TweenMax (and all publicly available GSAP files) are hosted on Cloudfare’s super-fast and reliable cdnjs.com.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Thanks to GSAP : https://greensock.com/