GSAP (GreenSock Animation Platform) is a JavaScript library for creating high-performance animations on the web. You give it an HTML element, tell it what to animate and how long to take, and it handles the rest. It works with any setup — a plain HTML page, a CMS, or a JavaScript framework — because at its core it just targets DOM elements and changes their properties over time. Animations run at a smooth 60fps and the library is lightweight, so your pages stay fast.

You have two ways to add GSAP to your project:

npm (recommended for larger projects):

npm install gsap

Then import it in your JavaScript:

import gsap from 'gsap';

CDN (quick start — just add a script tag):

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

That's it — no build step. Once the script loads, code>gsap is available globally and you can start animating immediately.

A tween is a single animation that changes a property from one value to another. There are three main methods depending on how you want to control the start and end:

gsap.to() — Animates from the element's current state to the values you specify:

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

This moves any element with the class box 200px to the right over 1 second.

gsap.from() — Animates from the specified values to the element's current state:

gsap.from(".box", { opacity: 0, y: 50, duration: 1 });

The box starts invisible and 50px lower, then fades and slides into place.

gsap.fromTo() — Full control over both start and end values:

gsap.fromTo(".box",
    { opacity: 0, x: -100 },
    { opacity: 1, x: 0, duration: 1 }
);

Breaking it down: Each method takes a target (a CSS selector string, a DOM element reference, or an array of elements) and a strong>vars object with the properties you want to animate. Any numeric CSS property, color, or transform can go in the vars object.

When you want to sequence multiple animations one after another (or overlap them), use a timeline. A timeline is a container that holds tweens and plays them in order:

const tl = gsap.timeline();

tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { y: 200, duration: 0.5 })
  .to(".box", { rotation: 360, duration: 0.75 });

By default, each tween starts when the previous one finishes. You can overlap them using the position parameter:

const tl = gsap.timeline();

tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { rotation: 180, duration: 0.5 }, "-=0.25") // starts 0.25s early
  .to(".box", { scale: 1.5, duration: 0.3 }, 0.5);        // starts 0.5s into the timeline

The position parameter accepts:

• Absolute time (seconds) — 0.5 starts at 0.5s.
• Relative to end — "-=0.25" starts 0.25s before the timeline ends.
• Label — "myLabel" inserts at a named label.
• "<" — starts at the same time as the previous tween's start.

Timelines give you control over the whole sequence: tl.pause(), tl.play(), tl.reverse(), tl.seek(1.5), and tl.timeScale(2) to speed things up.

These are the properties you put inside a tween's vars object to control what happens and how it looks.

Transform properties (performant — uses CSS transforms under the hood):

x, y, z — Move an element along each axis (in pixels). Use z with 3D rendering.

rotation — Rotate in degrees (360 = one full spin).

rotationX, rotationY, rotationZ — 3D rotation on a specific axis.

scale — Uniform scale. 2 = double size, 0.5 = half.

scaleX, scaleY — Scale only horizontally or vertically.

skewX, skewY — Skew (tilt) an element along an axis.

Visual properties:

opacity — 0 (invisible) to 1 (fully visible).

autoAlpha — Shorthand that combines opacity and visibility. When it reaches 0, the element is hidden from screen readers and keyboard focus.

color, backgroundColor — Animate text or background color (hex, rgba, or named colors).

borderRadius — Animate rounded corners.

width, height — Animate dimensions.

Timing & control:

duration — How long the animation runs in seconds. Default 0.5.

delay — Wait time before the animation starts (seconds).

repeat — Number of repeats. -1 loops forever.

repeatDelay — Pause between repeats.

yoyo — When true, the animation reverses back to the start on each repeat (like a yo-yo).

ease — The easing curve (see the Easing section below).

stagger — If multiple elements are targeted, staggers their start times. 0.1 means each element starts 0.1s after the previous one.

Callbacks & advanced:

onStart — Function called when the animation begins.

onComplete — Function called when the animation finishes.

onUpdate — Function called on every frame during the animation.

onRepeat — Function called each time a repeat occurs.

paused — If true, the animation starts paused. Call .play() to begin.

immediateRender — If true, the tween jumps to its end state immediately upon creation (useful with from()).

overwrite — Controls whether existing tweens on the same target are killed. "auto" (default) handles it intelligently.

id — A string label you can use to find the tween later with gsap.getById().

timeScale — Multiplier for animation speed. 2 = double speed, 0.5 = half speed.

progress — A number between 0 and 1 to jump to a specific point in the animation.

Easing controls how an animation accelerates and decelerates over time. Without easing, everything moves at a constant speed — it feels robotic. Easing adds a natural feel of real-world motion.

Apply it with the ease property:

gsap.to(".box", { x: 300, duration: 1, ease: "power2.out" });

Common easing types:

power1.out — Gentle deceleration at the end. Good for fades and small slides.

power2.out — Moderate deceleration. The most popular choice for UI animations.

power3.out — Strong deceleration — the element glides smoothly to a stop.

power1.in — Starts slow and speeds up (like a car accelerating).

power1.inOut — Slow start, fast middle, slow end — natural for object motion.

elastic.out — Overshoots then bounces back to settle. Great for attention-grabbing effects.

bounce.out — Simulates dropping — the element bounces a few times before stopping.

back.in — Moves slightly backward before springing forward to the target.

circ.inOut — Circular motion curve for very smooth starts and stops.

none / linear — Constant speed, no easing.

Easing patterns explained:

.in — Accelerates (slow → fast).

.out — Decelerates (fast → slow). Use this for elements entering the screen.

.inOut — Both (slow → fast → slow). Use this for elements moving between two points.

GSAP has many more easings. Try them visually at the GSAP Ease Visualizer.

If a GSAP animation is still running when you remove its target elements from the page (or navigate away), the animation continues in memory. This causes memory leaks and unwanted behavior — the tweens keep trying to update elements that no longer exist.

Always clean up your tweens and timelines.

Kill a single tween:

const tween = gsap.to(".box", { x: 200, duration: 1 });

// Later, when cleaning up:
tween.kill();

Kill all tweens on a specific target:

gsap.killTweensOf(".box");

Kill a timeline:

const tl = gsap.timeline();
tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { rotation: 360, duration: 0.5 });

// Later, when cleaning up:
tl.kill();

Revert to the original state:

gsap.set(".box", { x: 0, rotation: 0 });

Or use the revert() method if you're using GSAP's ScrollTrigger or other plugins that track changes.

Clean up event listeners too: If your code attaches event listeners (like resize or scroll handlers), always remove them when they're no longer needed:

window.removeEventListener("resize", handleResize);

Keeping a reference to every tween and timeline you create — and killing them when you're done — prevents memory leaks and ensures animations don't fire on elements that have been removed from the page.