GSAP Cheatsheet

Easing

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

Ease Syntax

// String shorthand (most common)
gsap.to(".box", { x: 200, ease: "power2.out" });

// Inline config (for eases that accept parameters)
gsap.to(".box", { x: 200, ease: "elastic.out(1, 0.3)" });

// Function reference
import { Power2, Elastic } from "gsap";
gsap.to(".box", { x: 200, ease: Power2.easeOut });

Built-in Ease Families

Family	Variants	String	Notes
Power0 / none	(flat)	`"none"` / `"linear"`	Constant velocity
Power1	in, out, inOut	`"power1.out"`	Gentle
Power2	in, out, inOut	`"power2.out"`	Default feel
Power3	in, out, inOut	`"power3.out"`	Snappy
Power4	in, out, inOut	`"power4.out"`	Very fast snap
Back	in, out, inOut	`"back.out(1.7)"`	Overshoot; param = overshoot amount
Bounce	in, out, inOut	`"bounce.out"`	Ball bounce feel
Circ	in, out, inOut	`"circ.out"`	Circular arc — far more abrupt at the extreme than sine
Elastic	in, out, inOut	`"elastic.out(1, 0.3)"`	Spring; amplitude, period
Expo	in, out, inOut	`"expo.out"`	Exponential — very dramatic
Sine	in, out, inOut	`"sine.out"`	Gentle sine curve

Variant Meanings

Variant	Meaning
`.in`	Starts slow, ends fast — acceleration
`.out`	Starts fast, ends slow — deceleration (most natural for moving into position)
`.inOut`	Slow → fast → slow — both ends smooth

gsap.to(".a", { x: 300, ease: "power3.in" });    // accelerate out
gsap.to(".b", { x: 300, ease: "power3.out" });   // decelerate in (most common)
gsap.to(".c", { x: 300, ease: "power3.inOut" }); // smooth both ends

Parametric Eases

Some eases accept configuration arguments.

// back — overshoot (default 1.7)
gsap.to(".box", { y: 100, ease: "back.out(2.5)" }); // more overshoot
gsap.to(".box", { y: 100, ease: "back.in(1)" });

// elastic — amplitude (1) and period (0.3 default)
gsap.to(".box", { scale: 1, ease: "elastic.out(1, 0.4)" }); // bouncier
gsap.to(".box", { scale: 1, ease: "elastic.out(0.5, 0.3)" }); // smaller amplitude

// steps — stepped animation (no interpolation)
gsap.to(".sprite", { backgroundPositionX: 800, ease: "steps(8)" }); // 8 discrete steps

EasePack Extras (free, registered separately)

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

Ease	String	Notes
RoughEase	`"rough({...})"`	Jitter / noise feel
SlowMo	`"slow(0.7, 0.7, false)"`	Fast ends, slow middle
ExpoScaleEase	`"expoScale(0.5, 6, power1)"`	Good for scale-in animations
SteppedEase	`"steps(5)"`	Built-in, no import needed

// RoughEase — random wobble
gsap.to(".box", {
  x: 200,
  ease: "rough({ template: power1.inOut, strength: 1, points: 20, taper: 'none', randomize: true, clamp: false })",
});

// SlowMo — fast-slow-fast (cinematic)
gsap.to(".box", {
  x: 200,
  ease: "slow(0.7, 0.7, false)", // linearRatio, power, yoyoMode
});

CustomEase (free)

Define any ease as a cubic bezier or SVG path string.

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

// Create and reuse
CustomEase.create("myBounce", "M0,0 C0.126,0.382 0.282,0.674 0.44,0.822 0.632,1.002 0.818,1.001 1,1");

gsap.to(".box", { x: 300, ease: "myBounce", duration: 1.5 });

// Inline (no name)
gsap.to(".box", {
  x: 300,
  ease: CustomEase.create("", "M0,0,C0.14,0,0.242,0.438,0.272,0.561,0.313,0.728,0.354,0.963,0.362,1,0.37,1.037,0.414,1.032,0.416,1.015"),
});

CustomBounce & CustomWiggle

Not part of EasePack — each has its own file, and both are built on CustomEase, which must be registered alongside them. All free since GSAP 3.13.

import { CustomEase }   from "gsap/CustomEase";
import { CustomBounce } from "gsap/CustomBounce";
import { CustomWiggle } from "gsap/CustomWiggle";
gsap.registerPlugin(CustomEase, CustomBounce, CustomWiggle);

CustomBounce.create("myBounce", { strength: 0.6, squash: 3 });
gsap.to(".ball", { y: 300, ease: "myBounce", duration: 2 });
// Companion squash
gsap.to(".ball", { scaleX: 1.2, scaleY: 0.8, ease: "myBounce-squash", duration: 2 });

CustomWiggle.create("myWiggle", { wiggles: 5 });
gsap.to(".needle", { rotation: 30, ease: "myWiggle", duration: 1.5 });

no-ease / linear

gsap.to(".box", { rotation: 360, ease: "none", repeat: -1, duration: 3 });
// "none" and "linear" are identical
gsap.to(".progress", { width: "100%", ease: "linear", duration: 10 });

Ease Visualizer

The official GSAP Ease Visualizer lets you preview and generate CustomEase paths interactively.

Using Ease as a Function

// Any ease can be accessed as a function (0–1 input → 0–1 output)
const ease = gsap.parseEase("power2.out");
console.log(ease(0.5)); // 0.875

// Useful for mapping progress to eased values manually
const progress = 0.3;
const eased = gsap.parseEase("elastic.out(1, 0.3)")(progress);

yoyoEase — different ease on the return pass

gsap.to(".box", {
  x: 300,
  duration: 1,
  repeat: -1,
  yoyo: true,
  ease: "power4.out",       // forward pass
  yoyoEase: "power1.in",    // backward pass (or true = mirror of ease)
});