GSAP Animation Gallery

What this tool does

A gallery of 100 animations you can build with GSAP. Play each one on its card, and when you find the one you want, copy a complete snippet that already includes the GSAP CDN. It runs the moment you paste it, so there is no setup before you can see it working.

The collection covers basic tweens (to / from / fromTo), timelines that chain several movements, ScrollTrigger effects driven by scroll position, horizontal scroll sections, text that rises one character at a time, SVG lines that draw themselves, and mouse-following interactions. The accent and sub colors can be changed from the left panel and apply to the live demos immediately (they also reach the copied code whenever that sample declares colors of its own).

How to use it

1. Narrow the list down with the category chips or the search box
2. Watch the animation on the card (press “▶ Replay” to run it again from the start)
3. Press “📋 Copy code” and paste it into your own HTML

Each ScrollTrigger sample has its own scrollable area inside the card, so you can scroll within a card to see the behaviour without moving the whole page. The copied code uses the normal setup where the page itself is the scroller, so it works as-is on a real page.

No paid plugins

Every GSAP plugin became free in 2025, but this gallery goes one step further and reproduces SplitText, DrawSVG, MorphSVG and ScrambleText using only core features — plain JavaScript for splitting characters, stroke-dasharray and stroke-dashoffset for line drawing, and polygon point interpolation for shape morphing. The only files loaded are gsap.min.js plus ScrollTrigger.min.js or Draggable.min.js where needed.

Categories

• Basic tweens (16) — fades, slides, stagger, easing comparison, blur, scatter, keyframes
• Timeline (12) — sequencing, labels, nesting, playback control, timeScale, seeking, marquee
• ScrollTrigger (20) — fade in, scrub, parallax, progress bar, batch, snap, class toggling, markers
• Scroll scenes (16) — horizontal scroll, stacking cards, frame sequence, zoom through, reading highlight
• Text & numbers (14) — per character, typewriter, scramble, glitch, count up, currency
• SVG & shapes (11) — line drawing, checkmark, circular progress, morph, bar and line charts, waves
• Interaction (11) — magnetic button, cursor follower, tilt, drag, before/after slider, modal

Related pages

Settings and common questions are covered in the GSAP Animation Gallery guide. If you would rather stay in CSS without JavaScript, see the CSS Animation Gallery, and for a GSAP-powered 3D carousel try the 3D Carousel Generator.