GSAP Snippets — Free HTML CSS JS GSAP Animation & ScrollTrigger Examples

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.