gsap

↗ homepage

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

weekly downloads1.8M

versionv3.14.2

licenseStandard 'no charge' license: https://gsap.com/standard-license.

categoryanimation

GSAPGreenSockanimationMotionPathPluginmotionmotionPathmatchMediaeasingScrollTriggerScrollSmootherObserverJavaScriptPixiPluginCustomEaseFlipSVG3D2DtransformmorphmorphingtweeningWebflow

Overview

GSAP (GreenSock Animation Platform) is a battle-tested JavaScript animation library used on over 11 million websites. It provides a unified API for animating CSS properties, SVG attributes, canvas graphics, WebGL scenes, and arbitrary JavaScript objects with sub-millisecond precision. Unlike CSS animations or the Web Animations API, GSAP handles cross-browser inconsistencies, provides advanced sequencing through timelines, and delivers consistent 60fps performance even with complex animation choreography.

The library is framework-agnostic and works seamlessly with vanilla JavaScript, React, Vue, Angular, or any other framework. GSAP's core philosophy is developer ergonomics—complex animations that would require hundreds of lines of manual code can be orchestrated in a few readable method chains. The library uses requestAnimationFrame internally and applies performance optimizations like automatic GPU acceleration for transforms.

GSAP operates on a plugin architecture. The core library handles property tweening, while plugins like ScrollTrigger (scroll-driven animations), MotionPathPlugin (SVG path animations), and Flip (layout transition animations) extend functionality. The standard license allows free usage for most projects, with a commercial license available for products where GSAP is a core selling point. With 1.7+ million weekly downloads, it's the de facto standard for production JavaScript animation work.

Quick Start

typescript

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Basic tween - animate element over 1 second
gsap.to('.box', {
  x: 200,
  rotation: 360,
  backgroundColor: '#ff6b6b',
  duration: 1,
  ease: 'power2.inOut'
});

// Timeline - sequence multiple animations
const tl = gsap.timeline({ repeat: -1, yoyo: true });
tl.to('.card', { scale: 1.1, duration: 0.3 })
  .to('.card-title', { y: -10, opacity: 0.8 }, '<')
  .to('.card-icon', { rotation: 180, duration: 0.4 });

// Scroll-triggered animation
gsap.from('.feature', {
  scrollTrigger: {
    trigger: '.feature',
    start: 'top 80%',
    toggleActions: 'play none none reverse'
  },
  y: 100,
  opacity: 0,
  duration: 0.8,
  stagger: 0.2
});

// Animate custom object properties
const counter = { value: 0 };
gsap.to(counter, {
  value: 1000,
  duration: 2,
  onUpdate: () => {
    document.querySelector('.counter').textContent = Math.floor(counter.value);
  }
});

Use Cases

Interactive UI animations: Animating modals, dropdowns, navigation menus, and micro-interactions with precise timing control. GSAP's timeline system allows you to choreograph multi-step animations with staggered elements, callbacks, and reversible playback—critical for polished user experiences.

Scroll-based storytelling: Using ScrollTrigger to create parallax effects, pin elements during scroll, scrub animations to scroll position, or trigger animations when elements enter the viewport. This is standard practice for marketing pages, product showcases, and narrative web experiences.

SVG and data visualization animation: Morphing SVG paths, animating chart transitions, or creating animated icons and illustrations. GSAP handles SVG attributes (paths, viewBox, stroke properties) as easily as CSS properties, making it ideal for interactive infographics.

Game and canvas animations: Animating sprite positions, particle systems, or UI overlays in canvas/WebGL games. GSAP's performance characteristics and ability to animate arbitrary object properties make it suitable for real-time interactive applications.

Page transitions and route changes: Creating smooth page-to-page animations in SPAs using GSAP's Flip plugin to calculate optimal transforms between layout states, or coordinating exit/enter animations when routes change in React Router or similar frameworks.

Pros & Cons

Pros

+Exceptional performance—faster than CSS transitions in many scenarios, with automatic GPU acceleration and optimized property updates
+Powerful timeline system for sequencing complex multi-element animations with precise control over timing, delays, and staggering
+Framework-agnostic with zero dependencies—works everywhere from vanilla JS to modern frameworks, with official React hooks available
+ScrollTrigger plugin is industry-leading for scroll animations, handling edge cases and browser quirks that custom solutions miss
+Animate anything JavaScript can touch—CSS, SVG, canvas, custom objects, not just DOM elements

Cons

−Bundle size is significant—core is ~50KB minified (17KB gzipped), grows substantially with plugins like ScrollTrigger
−Learning curve for advanced features—timelines, callbacks, and plugin configurations require investment to master effectively
−Commercial license ($199/year) required for SaaS products or applications where animation is a core feature, though standard license covers most use cases

Alternatives

animejsv4.3.6

JavaScript animation engine

animationanimeanimejs

543K / week

framer-motionv12.34.2

A simple and powerful JavaScript animation library

animationreact animationreact

22.4M / week

Comparisons

framer-motion vs gsap

Install

bash

npm install gsap

bash

pnpm add gsap

bash

bun add gsap

Overview

Quick Start

typescript

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Basic tween - animate element over 1 second
gsap.to('.box', {
  x: 200,
  rotation: 360,
  backgroundColor: '#ff6b6b',
  duration: 1,
  ease: 'power2.inOut'
});

// Timeline - sequence multiple animations
const tl = gsap.timeline({ repeat: -1, yoyo: true });
tl.to('.card', { scale: 1.1, duration: 0.3 })
  .to('.card-title', { y: -10, opacity: 0.8 }, '<')
  .to('.card-icon', { rotation: 180, duration: 0.4 });

// Scroll-triggered animation
gsap.from('.feature', {
  scrollTrigger: {
    trigger: '.feature',
    start: 'top 80%',
    toggleActions: 'play none none reverse'
  },
  y: 100,
  opacity: 0,
  duration: 0.8,
  stagger: 0.2
});

// Animate custom object properties
const counter = { value: 0 };
gsap.to(counter, {
  value: 1000,
  duration: 2,
  onUpdate: () => {
    document.querySelector('.counter').textContent = Math.floor(counter.value);
  }
});

Use Cases

Pros & Cons

Pros

+Exceptional performance—faster than CSS transitions in many scenarios, with automatic GPU acceleration and optimized property updates
+Powerful timeline system for sequencing complex multi-element animations with precise control over timing, delays, and staggering
+Framework-agnostic with zero dependencies—works everywhere from vanilla JS to modern frameworks, with official React hooks available
+ScrollTrigger plugin is industry-leading for scroll animations, handling edge cases and browser quirks that custom solutions miss
+Animate anything JavaScript can touch—CSS, SVG, canvas, custom objects, not just DOM elements

Cons

−Bundle size is significant—core is ~50KB minified (17KB gzipped), grows substantially with plugins like ScrollTrigger
−Learning curve for advanced features—timelines, callbacks, and plugin configurations require investment to master effectively
−Commercial license ($199/year) required for SaaS products or applications where animation is a core feature, though standard license covers most use cases