GSAP
The industry-standard JavaScript animation platform, including ScrollTrigger and all plugins.
The heavyweight for production motion and scroll-driven storytelling — and as of 2024 every plugin is free thanks to Webflow. If you have seen an award-winning site animate, it was probably this.
GSAP (the GreenSock Animation Platform) is the most battle-tested animation engine on the web. Its timeline model, easing control and plugin ecosystem — ScrollTrigger above all — are what power most of the motion you see on Awwwards. In 2024 Webflow acquired GreenSock and made the entire toolset, including the previously paid plugins, free.
Start with this
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.from('.card', {
y: 60,
opacity: 0,
stagger: 0.1,
scrollTrigger: {
trigger: '.card-grid',
start: 'top 80%',
},
});The take, for AI builders
For AI builders, GSAP is worth it when motion is a feature, not a garnish — scroll storytelling, complex sequencing, pinned sections. The API is large, so be specific with your agent ("a ScrollTrigger timeline that pins the hero and fades in cards on scroll") and you will get production-grade results. For a simple fade-in it is overkill — reach for CSS or Motion instead.
When to reach for it
✓ Good fit
- Scroll-driven, pinned and sequenced animations
- Award-site level motion that has to be robust across browsers
- You have outgrown CSS transitions and want fine timeline control
✕ Not for
- Simple hover / enter transitions (CSS is lighter)
- A tiny bundle is critical and you only need basic motion
Alternatives
More ergonomic inside React; declarative components over imperative timelines.
Much smaller and simpler when you don't need scroll plugins.
Related in Animation & motion
Animate.css
A cross-browser library of ready-to-use, just-add-a-class CSS animations like bounce, fade and zoom.
- css
- animation-library
- ready-made
The classic just-add-a-class CSS animation library. Ancient by web standards and still handy for a quick attention cue.
Visit ↗anime.js
A lightweight JavaScript animation engine for CSS, SVG, the DOM and JS objects.
- animation
- javascript
- svg
The sweet spot between hand-rolled CSS and a heavy motion framework — tiny, framework-agnostic and a joy for staggered, timeline-based motion. If you are not on React, this is my first reach.
Deep dive →Animista
A web playground to tweak ready-made CSS animations and copy only the CSS you use.
- css
- animation-generator
- web-tool
Tweak ready-made CSS animations in the browser and copy only the keyframes you use. Great for grabbing a one-off effect without adding a dependency.
Visit ↗