GSAP animation tutorials, examples and guides

32 articles

Build smoother web animation with practical, production-minded guides. Learn ScrollTrigger, text effects, performance, accessibility and the patterns that keep motion maintainable.

Featured guides

Examples Updated 9 Nov 2026

164 GSAP animation examples and demos with code (2026)

164 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

UI elements Updated 26 Oct 2026

54 animated UI components built with GSAP (2026)

54 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

Charity Campaign Template demo, from this article

Templates Updated 6 Nov 2026

108 animated website templates built with GSAP (2026)

108 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Eight are completely free to download.

Latest articles

All 32, newest first.

Coffee Shop Template demo, from this article

Release 28 Oct 2026

41 GSAP website templates rebuilt, 36 as multi-page sites

What changed in 41 rebuilt GSAP Vault templates: 36 are now multi-page sites, each a worked business from coffee roaster to estate agent. v1 stays downloadable.

Gooey Liquid Nav demo, from this article

Tutorial 28 Oct 2026

Liquid hover effects with GSAP: three techniques with code

Liquid hovers in GSAP need no plugin: an SVG displacement filter for a melt, a gooey filter for merging shapes, and a WebGL water ripple, with code for each.

Physiotherapy Clinic demo, from this article

Tutorial 6 Oct 2026

GSAP page transitions: seven patterns with code

Seven GSAP page transition patterns and where each belongs, plus how to start on the click, load during the exit timeline, manage focus and avoid jank.

Glitch Text Effect demo, from this article

Tutorial 1 Oct 2026

GSAP glitch effect: build an animated text headline

Build a GSAP glitch text effect with animated colour shadows, a replay button and reduced-motion support. Complete HTML, CSS and JavaScript included.

Photo Reel Preloader demo, from this article

Tutorial 26 Sept 2026

GSAP preloader: a loading animation that tracks real progress

Build a GSAP preloader that tracks real image loading: a counter and progress bar, a curtain exit and a staggered reveal. Complete code included.

Release 7 Sept 2026

A free visual hierarchy course for developers

Six free visual hierarchy labs for developers: practise reading order, typography, spacing and mobile layout in the first GSAP Vault course.

Release 5 Sept 2026

September 2026: site refresh and new GSAP demos

GSAP Vault has a quieter design, around two dozen effect demos rebuilt on a neutral ground, a new Scroll Story Flow effect, and a redesigned free parallax hero.

Aurora Gradient Field demo, from this article

Tutorial 2 Sept 2026

GSAP background animation: a drifting gradient backdrop

Build an ambient animated background with GSAP: soft colour fields that drift behind your content, pause off screen and respect reduced motion. Complete code.

Guide 1 Sept 2026

54 animated UI components built with GSAP (2026)

54 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

Workflow 22 Aug 2026

CV website vs PDF: what a website CV fixes, and how to make it print

A CV website is one link you can update after sending it. What it fixes over a PDF, where it falls down, what it must get right and how to make it print.

Release 8 Aug 2026

Five new GSAP effects you drive with the pointer

Five new GSAP effects: a holographic foil card, a Voronoi shatter, a cloth simulation, a curled page turn, and a curtain nav overlay. No ScrollTrigger.

Stagger Grid Reveal demo, from this article

Platform guide 31 Jul 2026

Shopify custom animations with GSAP

Add GSAP animations to a Shopify theme: where the code goes, how to survive theme editor section reloads, and a scroll-reveal collection grid.

Scroll Progress Indicator demo, from this article

Scroll tutorial 26 Jul 2026

GSAP with React: useGSAP, ScrollTrigger and proper cleanup

Use GSAP in React with useGSAP: scope selectors to a ref, clean up ScrollTrigger on unmount, handle Strict Mode and Next.js, and respect reduced motion.

Developer Portfolio Template demo, from this article

Release 23 Jul 2026

28 new website templates, and an offer: request the next one

28 new GSAP website templates in five days: portfolios, restaurants, gyms and SaaS products. Plus what's coming next and how to request a template.

Horizontal Scroll Section demo, from this article

Scroll tutorial 22 Jul 2026

Horizontal scroll sections with GSAP ScrollTrigger

Build a pinned horizontal scroll section with GSAP ScrollTrigger: pin, scrub, and a track that slides sideways as you scroll. Complete code included.

Guide 18 Jul 2026

108 animated website templates built with GSAP (2026)

108 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Eight are completely free to download.

Scroll Path Journey demo, from this article

Scroll tutorial 17 Jul 2026

GSAP MotionPathPlugin: animate an element along an SVG path

How to use GSAP MotionPathPlugin to animate an HTML element along an SVG path on scroll, with ScrollTrigger, responsive alignment and a reduced-motion fallback.

Draggable Card Stack demo, from this article

Release 15 Jul 2026

Six new GSAP effects: card stacks and more

Six new GSAP effects land in the vault: swipeable card stacks, morphing blob masks, horizontal scroll, SVG line draw, image trails, and count-up stats.

Scroll tutorial 5 Jul 2026

164 GSAP animation examples and demos with code (2026)

164 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

Canvas Particle Flow demo, from this article

Scroll tutorial 24 Jun 2026

GSAP performance: why animations get janky and how to fix it

A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

CSS Scroll Reveal demo, from this article

Platform guide 10 Jun 2026

Staggered grid reveal in WordPress with GSAP

Animate a grid of cards into view with a staggered scroll reveal in WordPress using GSAP and ScrollTrigger. Directional stagger, no plugin required.

Infinite Marquee with Mouse Control demo, from this article

Platform guide 4 Apr 2026

Infinite marquee in WordPress with GSAP, no plugin

Build an infinite GSAP marquee for WordPress: scrolling text, logo strips and ticker bars, with the full code and where to add it via WPCode or a child theme.

Scroll Image Sequence demo, from this article

Scroll tutorial 16 Mar 2026

Apple-style image sequence scroll animation with GSAP

Build an image sequence scroll animation with GSAP ScrollTrigger and canvas: staged preloading, mobile frame sets, reduced motion and troubleshooting.

Split Text Stagger Reveal demo, from this article

Comparison 8 Mar 2026

GSAP vs Anime.js vs Motion Compared

A practical comparison of GSAP, Anime.js, and Motion. Same animations built in each library, with bundle sizes, features, and a decision framework.

Cursor Trail Effect demo, from this article

Platform guide 2 Mar 2026

Custom cursor for WordPress with GSAP, no plugin

Build a GSAP custom cursor follower for WordPress with magnetic and trail effects: HTML, CSS and JavaScript, plus WPCode, child theme and page builder setup.

Comparison 20 Feb 2026

GSAP Text Animation: 6 Approaches and When to Use Each

Compare six GSAP text animations: split reveals, typewriter, scramble, glitch, scroll highlights and cursor reactions, with working code for each.

Magnetic Cursor Effect demo, from this article

Workflow 14 Feb 2026

Web animation terms for content editors, and how to ask for them

The animation vocabulary for content editors: entrances, hovers, scroll-linked motion and transitions, what you can change and how to brief a developer.

Scroll Hijack Sections demo, from this article

Platform guide 7 Feb 2026

Webflow custom animations with GSAP: where the code goes

Add GSAP to Webflow: what native interactions can't do, where custom code goes (site, page or embed), and a scroll-scrubbed text reveal to copy.

Text Scramble Decode demo, from this article

Workflow 3 Feb 2026

Customize GSAP effects with ChatGPT and Claude: prompts that work

Prompts that work for customizing, integrating and debugging GSAP Vault effects with ChatGPT, Claude and other assistants, with a worked example.

Image Clip Reveal demo, from this article

Scroll tutorial 27 Jan 2026

Animate on scroll with GSAP ScrollTrigger (2026 examples)

Animate on scroll with GSAP ScrollTrigger: copy-paste CDN setup, reveals, scrubbed timelines, pinning with anticipatePin, WordPress tips and live examples.

Scroll Velocity Skew demo, from this article

Platform guide 18 Jan 2026

Text scramble effect in WordPress with GSAP

Add a GSAP text scramble to WordPress: text starts scrambled and decodes as it scrolls into view. One script and one CSS class, no plugin required.

FLIP Layout Morph demo, from this article

Comparison 8 Jan 2026

GSAP vs CSS Animations: Which Should You Use in 2026?

GSAP vs CSS animations in 2026: scroll-driven animations, View Transitions, @starting-style and performance compared, with a clear rule for when to use each.

Prefer to learn by changing a real page?

The courses are short labs where you edit a live interface and get feedback on each decision. If you came for a word rather than a tutorial, the glossary defines it, and resources lists everything else.

Explore the courses Browse all 164 effects