greensock/gsap

★ 24,712JavaScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

Mindmap

mindmap
  root((GSAP))
    What it does
      Animate values over time
      Update position opacity size
      Follow curved paths
    Key plugins
      ScrollTrigger for scroll
      SplitText for letters
      MorphSVG shape morphing
      Motion Path curves
    Why use it
      20x faster than jQuery
      Works all browsers
      Zero dependencies
    Use cases
      Scroll animations
      Text effects
      Interactive UI
      Web design polish

mindmap root((GSAP)) What it does Animate values over time Update position opacity size Follow curved paths Key plugins ScrollTrigger for scroll SplitText for letters MorphSVG shape morphing Motion Path curves Why use it 20x faster than jQuery Works all browsers Zero dependencies Use cases Scroll animations Text effects Interactive UI Web design polish

Things people build with this

USE CASE 1

Build scroll-triggered animations that play as users scroll down a page.

USE CASE 2

Create text effects that split, animate, or morph individual letters and words.

USE CASE 3

Animate UI elements along curved paths or with smooth position and opacity transitions.

USE CASE 4

Add polished, browser-compatible animations to React, Vue, or plain HTML websites.

Tech stack

JavaScriptReactVueHTML

Getting it running

Difficulty · easy Time to first run · 5min

Free to use for any purpose, including commercial projects, with all plugins included at no cost.

In plain English

GSAP, the GreenSock Animation Platform, is a JavaScript library for creating smooth, high-performance animations on websites. If you have ever seen a webpage where elements glide into view as you scroll, text splits apart elegantly, or objects follow a curved path, there is a good chance GSAP was involved. At its core, GSAP works by smoothly updating values over time, things like an element's position, opacity, size, or color, far more reliably and efficiently than built-in browser animation tools. It is claimed to be up to 20 times faster than jQuery's animation methods and works consistently across all major browsers. The library includes optional plugins for specific use cases. The ScrollTrigger plugin ties animations to the user's scroll position. MorphSVG morphs one shape into another. SplitText lets you animate individual letters or words. Motion Path animates elements along a curved line. As of the library's latest update, all plugins including the previously paid ones are free to use, even commercially. GSAP works alongside any JavaScript framework, React, Vue, or plain HTML, and has zero dependencies. You would use it any time you need polished, precise, browser-compatible animations on the web.

Copy-paste prompts

Prompt 1

Show me how to use GSAP to animate an element's position and opacity when it enters the viewport using ScrollTrigger.

Prompt 2

How do I use GSAP's SplitText plugin to animate individual words in a heading one by one?

Prompt 3

Create a GSAP animation that moves an element along a curved path defined by SVG.

Prompt 4

How do I integrate GSAP animations into a React component without conflicts?

Prompt 5

Use GSAP to morph one SVG shape into another smoothly with MorphSVG.

Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.