GSAP Cheatsheet

Setup

Use this GSAP reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Installation

GSAP is a practical animation library for software engineering portfolio projects: it helps beginner coding projects feel polished, and it gives advanced frontend builds timeline control, scroll effects, and stateful motion without hand-rolling requestAnimationFrame code.

CDN (quickest)

<!-- In <head> or before your scripts -->
<!-- Core only -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<!-- Core + ScrollTrigger (core must load first) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

npm / yarn

npm install gsap
# or
yarn add gsap

# Official React hook
npm install @gsap/react

ES module import

// Core only
import gsap from "gsap";

// With plugins — since GSAP 3.13 ALL plugins ship free in the public
// package, including formerly Club-only SplitText, MorphSVG, DrawSVG
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Draggable }     from "gsap/Draggable";
import { TextPlugin }    from "gsap/TextPlugin";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(ScrollTrigger, Draggable, TextPlugin, MorphSVGPlugin);

Always call gsap.registerPlugin() for every plugin before using it — even if you imported it. Tree-shaking can drop unregistered plugins. Registering the same plugin twice is harmless.

CommonJS (Node / older bundlers)

const { gsap } = require("gsap");
const { ScrollTrigger } = require("gsap/ScrollTrigger");
gsap.registerPlugin(ScrollTrigger);

Global Configuration

gsap.defaults() sets defaults for all future tweens. gsap.config() sets global behavior.

// Tween defaults (applied to every tween unless overridden)
gsap.defaults({
  ease: "power2.out",
  duration: 0.5,
});

// Global config (not per-tween)
gsap.config({
  autoSleep: 60,          // seconds of inactivity before GSAP sleeps (saves CPU)
  force3D: "auto",        // true | false | "auto"
  nullTargetWarn: true,   // warn when a target resolves to null
  units: { left: "%", top: "%" }, // default units per property
});

Targeting Elements

GSAP accepts virtually any selector or reference as a target.

// CSS selector string (most common)
gsap.to(".box", { x: 100 });

// Single DOM element
gsap.to(document.getElementById("hero"), { opacity: 0 });

// NodeList / array of elements
gsap.to(document.querySelectorAll("li"), { y: -20, stagger: 0.1 });

// React ref
gsap.to(myRef.current, { scale: 1.2 });

// Plain object (animate arbitrary numeric props)
const obj = { value: 0 };
gsap.to(obj, { value: 100, onUpdate: () => console.log(obj.value) });

// Array of mixed targets
gsap.to([".box", myRef.current], { rotation: 360 });

Version Check & Utilities

console.log(gsap.version); // e.g. "3.13.0"

// Check what's registered with the core
gsap.core.globals().ScrollTrigger; // the plugin, or undefined if unregistered

// Get an ease function by name
gsap.parseEase("power2.inOut"); // returns the ease function

React: useGSAP() (official hook)

useGSAP() from @gsap/react is the recommended React pattern — a drop-in replacement for useEffect/useLayoutEffect that reverts every GSAP object created inside it when the component unmounts or dependencies change.

import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

function MyComponent() {
  const container = useRef(null);

  useGSAP(() => {
    gsap.to(".box", { x: 200 }); // selector text scoped to container
  }, { scope: container, dependencies: [] });

  return <div ref={container}><div className="box" /></div>;
}

// contextSafe — wrap event handlers so their animations are cleaned up too
const { contextSafe } = useGSAP({ scope: container });
const onClick = contextSafe(() => gsap.to(".box", { rotation: "+=360" }));

gsap.context() (framework-agnostic cleanup)

gsap.context() scopes all GSAP instances for easy cleanup — it is what useGSAP() uses under the hood; reach for it directly outside React.

import { useLayoutEffect, useRef } from "react";
import gsap from "gsap";

function MyComponent() {
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      // All tweens/timelines created here are scoped to containerRef
      gsap.to(".box", { x: 200 }); // finds .box INSIDE containerRef.current
    }, containerRef); // <-- scope root

    return () => ctx.revert(); // kills everything on unmount
  }, []);

  return <div ref={containerRef}><div className="box" /></div>;
}

// Expose named animations for external control
const ctx = gsap.context(() => {}, containerRef);
ctx.add("slideIn", () => {
  gsap.from(".card", { y: 40, opacity: 0 });
});
ctx.slideIn(); // call by name
ctx.revert();  // cleanup

Ticker (the heartbeat)

GSAP drives animation from a single rAF ticker.

// Add a callback to every tick
gsap.ticker.add((time, deltaTime, frame) => {
  // time = total elapsed seconds
  // deltaTime = ms since last frame
  // frame = frame count
  console.log(time);
});

// Remove it
const myCallback = (t) => console.log(t);
gsap.ticker.add(myCallback);
gsap.ticker.remove(myCallback);

// Control frame rate (defaults to display refresh rate)
gsap.ticker.fps(30); // cap at 30 fps

// Lag smoothing: prevents big jumps after tab comes back into focus
gsap.ticker.lagSmoothing(500, 33); // threshold ms, cap ms

Plugin Availability

Since GSAP 3.13 (May 2025, after the Webflow acquisition) every plugin is 100% free — the paid Club GreenSock / Club GSAP tier is gone, and the formerly members-only plugins ship in the standard gsap npm package and on the CDN.

Plugin	Import path
`ScrollTrigger`	`gsap/ScrollTrigger`
`ScrollToPlugin`	`gsap/ScrollToPlugin`
`ScrollSmoother`	`gsap/ScrollSmoother`
`Observer`	`gsap/Observer`
`Draggable`	`gsap/Draggable`
`Flip`	`gsap/Flip`
`TextPlugin`	`gsap/TextPlugin`
`SplitText`	`gsap/SplitText`
`MotionPathPlugin`	`gsap/MotionPathPlugin`
`MorphSVGPlugin`	`gsap/MorphSVGPlugin`
`DrawSVGPlugin`	`gsap/DrawSVGPlugin`
`CustomEase` / `EasePack`	`gsap/CustomEase`, `gsap/EasePack`
`GSDevTools`	`gsap/GSDevTools`

Older references to "Club GreenSock" plugins, trial warnings, and npm install gsap@npm:@gsap/shockingly are obsolete — plain npm install gsap includes everything.