Skip to content

GSAP

The professional animation engine — precise timelines, scroll triggers, framework-agnostic.

UI & GraphicsAnimationJavaScript
Official docs ↗GitHub ↗

What it is

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations on the web. It supports complex sequencing, tweening, and timeline-based animations with smooth performance across all major browsers.

GSAP provides `gsap.to()`, `gsap.from()`, `gsap.fromTo()`, and `gsap.timeline()` methods to animate DOM elements, canvas, SVG, and more. Animations can be chained, sequenced, and controlled with easing, duration, delays, and callbacks.

Licence
Standard licence is free for most uses; check terms for commercial products
Best known for
ScrollTrigger

When to use it

The question documentation cannot answer for you — because it cannot recommend something else.

Reach for it when

  • Complex sequenced animation where you need exact control over timing and easing
  • Scroll-driven storytelling via ScrollTrigger
  • You are not in React, or need animation outside the component tree

Look elsewhere when

  • Simple React component transitions, where Framer Motion is more idiomatic

Installation

npm install gsap

Getting started

The smallest useful thing you can do with it, and what each part means.

Simple tween
import { gsap } from 'gsap';
gsap.to('.box', { x: 100, duration: 1 });
Animates the element with class `box` 100px to the right over 1 second.
Tween from initial state
gsap.from('.box', { opacity: 0, y: -50, duration: 1 });
Animates the element from opacity 0 and y-position -50px to its current state.

Advanced usage

Where the library earns its place over a simpler alternative.

Timeline sequencing
const tl = gsap.timeline({ repeat: 1, yoyo: true });
tl.to('.box', { x: 100, duration: 1 })
  .to('.box', { y: 50, duration: 1 })
  .to('.box', { rotation: 360, duration: 1 });
Creates a timeline to sequence multiple animations with repeat and yoyo effects.
Animating multiple elements
gsap.to('.box', { x: 200, stagger: 0.2, duration: 1 });
Animates multiple elements with the `box` class, staggering their start times by 0.2 seconds.
Scroll-triggered animation
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.to('.box', {
  x: 300,
  scrollTrigger: {
    trigger: '.box',
    start: 'top center',
    end: 'bottom 100px',
    scrub: true
  }
});
Animates an element based on scroll position using the ScrollTrigger plugin.
SVG animation
gsap.to('#circle', { strokeDashoffset: 0, duration: 2 });
Animates an SVG circle’s stroke using strokeDashoffset for a drawing effect.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

gsap is not defined
Ensure GSAP is imported correctly, e.g., `import { gsap } from 'gsap';` or included via CDN.
Cannot animate null element
Ensure the DOM element exists and is accessible before animating it.
Plugin not registered
For GSAP plugins, make sure to import and register them, e.g., `gsap.registerPlugin(ScrollTrigger);`

Best practices

  • Use timelines for sequencing multiple animations to maintain control and readability.
  • Use hardware-accelerated properties like transforms for smoother animations.
  • Leverage GSAP plugins (ScrollTrigger, Draggable, MotionPathPlugin) for advanced interactivity.
  • Keep animations performant by limiting unnecessary DOM manipulations.
  • Use easing functions to create natural motion.

Alternatives

Comparable options, and the reason you would pick one over the other.

Background

Why it exists, and what it was reacting to.

GSAP was created by Jack Doyle (GreenSock) in the mid-2000s to provide a professional-grade animation library that works consistently across browsers. It has become widely adopted in web development for animations ranging from simple UI transitions to complex interactive motion graphics.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide