GSAP Cheatsheet

Animatable Properties

Use this GSAP reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

Transform Shorthands

GSAP maps short property names to CSS transforms. Prefer these over the transform string — they compose correctly and are GPU-accelerated via matrix3d.

GSAP property	CSS equivalent	Notes
`x`	`translateX`	px by default
`y`	`translateY`	px by default
`z`	`translateZ`	px, enables 3D
`xPercent`	`translateX` as % of element width	`-50` centers horizontally
`yPercent`	`translateY` as % of element height	combined with `x/y` they stack
`rotation`	`rotateZ`	degrees
`rotationX`	`rotateX`	degrees, needs perspective
`rotationY`	`rotateY`	degrees, needs perspective
`scale`	`scaleX` + `scaleY`	1 = normal
`scaleX`	`scaleX`	—
`scaleY`	`scaleY`	—
`skewX`	`skewX`	degrees
`skewY`	`skewY`	degrees

// Typical usage
gsap.to(".card", {
  x: 100,
  y: -50,
  rotation: 45,
  scale: 1.2,
  duration: 0.8,
});

// Centering trick
gsap.set(".modal", { xPercent: -50, yPercent: -50, left: "50%", top: "50%" });

// 3D flip
gsap.to(".card", {
  rotationY: 180,
  duration: 1,
  transformPerspective: 800, // perspective on the element itself
});

Transform Origin

// String (CSS-like)
gsap.set(".box", { transformOrigin: "top left" });
gsap.set(".box", { transformOrigin: "50% 100%" });

// svgOrigin: coordinates in the SVG's coordinate space
gsap.to(".gear", { rotation: 360, svgOrigin: "250 250", repeat: -1, ease: "none" });

Opacity & Visibility

gsap.to(".box", { opacity: 0 });            // 0–1
gsap.set(".box", { visibility: "hidden" }); // string value
gsap.set(".box", { display: "none" });      // string value
gsap.set(".box", { autoAlpha: 0 });         // opacity + visibility together (see below)

autoAlpha

autoAlpha sets both opacity AND visibility: hidden when opacity reaches 0. Avoids invisible-but-clickable elements.

gsap.to(".tooltip", { autoAlpha: 0, duration: 0.3 }); // hides cleanly
gsap.to(".tooltip", { autoAlpha: 1, duration: 0.3 }); // shows + fades in

Color Properties

GSAP animates CSS color properties as hex / rgb / hsl strings.

gsap.to(".box", {
  backgroundColor: "#ff0000",
  color: "rgb(0, 200, 100)",
  borderColor: "hsl(220, 80%, 60%)",
  duration: 0.5,
});

GSAP interpolates colors channel-by-channel (R, G, B). HSL source values are converted internally.

CSS Properties (non-transform)

gsap.to(".box", {
  width: "300px",
  height: "200px",
  padding: "20px",
  margin: "0 auto",
  borderRadius: "12px",
  fontSize: "1.5rem",
  lineHeight: 1.6,
  left: "50%",
  top: 0,
  zIndex: 10,       // numeric, no units
});

Avoid animating layout properties (width, height, padding, margin, top, left) when performance matters — they trigger layout. Prefer transform + opacity.

CSS Variables

// Animate a CSS custom property
gsap.to("body", {
  "--hue": 200,
  duration: 2,
});

// With units
gsap.to(".card", {
  "--border-size": "4px",
  duration: 0.5,
});

CSS variables must be registered or they animate as strings (which snaps, doesn't interpolate). Either use CSS.registerProperty() for numeric vars, or rely on GSAP's string interpolation for color vars.

SVG Attributes

// Animate presentation attributes directly
gsap.to("circle", { attr: { cx: 200, cy: 100, r: 50 } });
gsap.to("rect",   { attr: { width: 100, fill: "#ff0000" } });
gsap.to("path",   { attr: { d: "M0 0 L100 100" } }); // path morphing — use MorphSVGPlugin for this
gsap.to("line",   { attr: { x1: 50, y1: 50, x2: 150, y2: 150 } });

// stroke-dashoffset trick (draw-on effect without DrawSVGPlugin)
gsap.set("path", { attr: { "stroke-dasharray": 500, "stroke-dashoffset": 500 } });
gsap.to("path",  { attr: { "stroke-dashoffset": 0 }, duration: 2, ease: "none" });

Scrollable / Layout Properties

// Scroll position (requires ScrollToPlugin)
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
gsap.registerPlugin(ScrollToPlugin);

gsap.to(window, { scrollTo: "#section3", duration: 1 });
gsap.to(window, { scrollTo: { y: 800, autoKill: false }, duration: 1 });
gsap.to(".container", { scrollTo: { y: "max" }, duration: 0.5 }); // scroll to bottom

Object / Arbitrary Properties

GSAP can tween any numeric property on any plain object.

const config = { volume: 0, brightness: 1 };
gsap.to(config, {
  volume: 1,
  brightness: 0.5,
  duration: 2,
  onUpdate: () => {
    myAudio.volume = config.volume;
    applyBrightness(config.brightness);
  },
});

// Three.js example
gsap.to(mesh.position, { x: 5, y: 2, duration: 1 });
gsap.to(mesh.material, { opacity: 0, duration: 0.5 });
gsap.to(camera, { fov: 90, onUpdate: () => camera.updateProjectionMatrix() });

clearProps

Remove inline styles GSAP applied (restores CSS cascade).

// After animation completes, clear transform styles
gsap.to(".box", {
  x: 200,
  duration: 1,
  onComplete: () => gsap.set(".box", { clearProps: "x,y" }),
});

// Or inline
gsap.to(".box", { x: 200, clearProps: "x", duration: 1 });

// Clear everything
gsap.set(".box", { clearProps: "all" });

// Specific subset
gsap.set(".box", { clearProps: "transform,opacity" });

Modifiers Plugin (inline value transformation)

// Snap x to nearest 50
gsap.to(".box", {
  x: 500,
  duration: 2,
  modifiers: {
    x: gsap.utils.snap(50), // built-in snap util
  },
});

// Keep element within viewport bounds
gsap.to(".ball", {
  x: 1000,
  modifiers: {
    x: (x) => Math.min(Math.max(parseFloat(x), 0), window.innerWidth - 50) + "px",
  },
});

// Stagger-like phase offset
gsap.to(".item", {
  duration: 1,
  x: 200,
  modifiers: {
    x: (x, target) => x * (1 + 0.1 * +target.dataset.index),
  },
});

motionPath (MotionPathPlugin)

import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(MotionPathPlugin);

// Follow an SVG path element
gsap.to(".dot", {
  duration: 3,
  ease: "none",
  motionPath: {
    path: "#track",          // SVG <path> selector
    align: "#track",         // keep .dot aligned to the path
    alignOrigin: [0.5, 0.5], // center of element on the path
    autoRotate: true,        // rotate to face direction of travel
    autoRotate: 90,          // offset rotation by 90deg
    start: 0,                // 0–1 (start at beginning)
    end: 1,                  // 0–1 (end at end)
  },
});

// Array of points
gsap.to(".dot", {
  duration: 2,
  motionPath: [
    { x: 0,   y: 0 },
    { x: 100, y: -50 },
    { x: 200, y: 0 },
  ],
});