GSAP
73kb / ~28kb gzThe most popular JavaScript animation library — animate anything on the web.
See It in Action
One timeline, total control — animations you can't build with CSS alone.
Cards animate in with staggered timing — a classic landing page pattern.
What is GSAP?
GSAP (GreenSock Animation Platform) is a JavaScript library that lets you animate anything on a webpage — move elements, change colors, fade things in and out, create scroll effects, and more. If you've seen a website with smooth, impressive animations, there's a good chance it uses GSAP.
It works with any framework (React, Vue, vanilla JS) and all modern browsers. You animate things by telling GSAP what to change and how long it should take — it handles the rest.
When to Use GSAP
How GSAP Compares
GSAP is more powerful for complex timelines and has better performance at scale. Anime.js is lighter (~10kb gzipped) and simpler for basic animations.
CSS is simpler and lighter for basic transitions. GSAP wins when you need sequencing, JS-driven logic, or cross-browser consistency.
Motion is declarative and integrates neatly with React, Vue, and vanilla JS. GSAP is more powerful for complex imperative sequences and timelines.
Get Started with GSAP
npm install gsapyarn add gsap<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>import { gsap } from "gsap";
// Animate an element
gsap.to(".box", {
x: 200,
rotation: 360,
duration: 1,
ease: "power2.out"
});