gsap

The professional-grade JavaScript animation engine — buttery-smooth, framework-agnostic timelines and tweens.

gsap

General JS

The professional-grade JavaScript animation engine — buttery-smooth, framework-agnostic timelines and tweens.

npmGitHubDocs

Fit

Bundle (gzip)

27.4 kB

70.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

CSS animations and transitions break down fast once you need sequencing, scrubbing on scroll, or precise control over dozens of moving elements. Chaining setTimeout calls and juggling transitionend events is fragile, and performance degrades the moment you animate anything other than transform and opacity.

What It Does

GSAP is a battle-tested animation library that tweens any numeric property of any object — DOM, SVG, canvas, or plain JS values — with a timeline system for orchestrating complex sequences. It normalizes browser quirks, runs off a single optimized ticker, and scales from a one-line tween to a full scroll-driven experience via plugins like ScrollTrigger.

Installation

bash
npm install gsap

Usage Example

js
import gsap from 'gsap';

const tl = gsap.timeline({ defaults: { ease: 'power2.out' } });

tl.to('.hero', { opacity: 1, y: 0, duration: 0.6 })
  .to('.hero-cta', { scale: 1, duration: 0.4 }, '-=0.2')
  .from('.card', { y: 40, opacity: 0, stagger: 0.1 });

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.