GSAP is the animation library production sites reach for when CSS transitions run out of room: precise timelines, scroll-linked scrubbing, and pinning that stays smooth on a long page. Every snippet tagged GSAP loads the library from a CDN — no npm install, no build step — and keeps its timeline setup in one readable block you can lift straight into a component.

The collection spans the whole surface: basic tweens and staggers, ScrollTrigger reveals and pinned story sections, image-sequence scrubbing, SVG path animation, and the flip/morph transitions that make a layout change feel deliberate rather than abrupt.

Timelines over one-off tweens

A gsap.to() call is a tween; a gsap.timeline() is a sequence of them with shared position labels, per-tween offsets and a single play/pause/reverse surface. Every multi-step snippet here builds a timeline rather than chaining callbacks, because a timeline can be scrubbed, reversed and retimed as a whole — the property that makes GSAP worth reaching for once an animation has more than two moving parts.

ScrollTrigger for anything tied to scroll position

Pinning a section, scrubbing a value against scroll progress, or firing a reveal at a precise viewport offset is ScrollTrigger's job, and it is a genuinely hard problem to hand-roll correctly across browsers — start/end markers, resize recalculation and momentum scrolling all have edge cases ScrollTrigger has already solved. These snippets configure it with explicit start/end strings and scrub values rather than magic numbers, so the trigger points stay readable months later.

Stagger, and why it reads as intentional

Animating a grid or a list one element at a time, with a small per-child delay, is the difference between a page that "appears" and a page that "arrives." GSAP's stagger option computes that delay from the DOM order automatically, including grid-aware distributions that ripple from the centre or a corner rather than a flat left-to-right sweep.

Cleanup discipline

Because GSAP timelines and ScrollTrigger instances keep running until explicitly killed, every snippet that mounts one also tears it down — killing the timeline and any associated ScrollTrigger on unmount or teardown. This is the single most common bug in hand-ported GSAP code, and it is why the framework exports here route setup and cleanup through the mount hook rather than leaving it to whoever integrates the snippet.

Real-world uses

Common Use Cases

Marketing pages and product tours

Pinned sections and scroll-scrubbed reveals turn a long landing page into a paced narrative instead of a wall of blocks.

Agency and portfolio sites

Stagger grids, morphing shapes and motion-path animation signal craft in the first three seconds of a visit.

Replacing brittle scroll listeners

ScrollTrigger handles start/end points, scrubbing and cleanup that hand-rolled scroll handlers usually get wrong.

Learning timeline-based animation

Each snippet is a small, complete timeline — the fastest way to see how labels, offsets and eases compose.

Got questions?

Frequently Asked Questions

GSAP's core, including ScrollTrigger, is free for the vast majority of uses under its standard licence. The bonus plugins (SplitText, MorphSVG and friends) are the paid ones — none of the snippets here depend on them, so everything in this tag runs on the free CDN build.

Export the snippet to your framework from the editor. The exporter moves the timeline setup into the mount hook — useEffect in React, onMounted in Vue, ngAfterViewInit in Angular — and returns a cleanup that kills the timeline and any ScrollTrigger instances, which is the step most hand-ported GSAP code forgets.

Not when it animates transform and opacity, which is what these snippets do. GSAP batches its work into a single requestAnimationFrame tick, so ten animating elements cost one loop rather than ten competing ones — usually smoother than the equivalent CSS transitions firing independently.

No. Every snippet is plain HTML, CSS and vanilla JavaScript that runs in any page — a static file, a WordPress theme, a Rails view, anything. When you do want a framework version, the editor exports each snippet as a React component, a React + Tailwind component, a standalone Tailwind HTML file, a Vue 3 single-file component or an Angular standalone component.

Yes — copy, modify and ship them in personal or commercial work, with no attribution required and no licence to track.

Yes. Every snippet opens in a live editor with separate HTML, CSS and JS panels and a preview that updates as you type. Check it at mobile, tablet and desktop widths, then copy the code or export it in your framework of choice.

Tags that appear alongside GSAP

Scroll Animation JS Libraries 3D Effects Canvas Three.js Micro-Interactions Text Effects Glassmorphism All tags →

Loading…