27 articles

GSAP animation tutorials, examples and guides

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

Featured guides

Release 7 September 2026

A free visual hierarchy course for developers

Introducing GSAP Vault courses, starting with six free visual hierarchy labs where you practise reading order, typography, spacing and mobile layout.

Examples 1 September 2026

59 animated UI components built with GSAP (2026)

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

Latest articles

Showing all 25 articles

5 Sept 2026 Release

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.

2 Sept 2026 Tutorial

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.

22 Aug 2026 Templates

Why your CV should be a website (and still print as a PDF)

A CV website gives you one link you can update after you send it. Here's what it fixes, where it falls down, and what a good one has to get right.

8 Aug 2026 Release

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.

31 Jul 2026 Tutorial

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.

26 Jul 2026 React

GSAP with React: useGSAP, ScrollTrigger and proper cleanup

Learn how to use GSAP in React with useGSAP, scoped selectors, ScrollTrigger cleanup, Strict Mode, Next.js, and reduced-motion support.

23 Jul 2026 Templates

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.

22 Jul 2026 ScrollTrigger

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.

18 Jul 2026 Templates

73 animated website templates built with GSAP (2026)

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

17 Jul 2026 Tutorial

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.

15 Jul 2026 Release

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.

5 Jul 2026 Examples

108 GSAP animation examples and demos with code (2026)

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

24 Jun 2026 Performance

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.

10 Jun 2026 Tutorial

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.

4 Apr 2026 WordPress

Adding an Infinite Marquee to WordPress

Build a smooth infinite marquee for WordPress using GSAP. Scrolling text, logo strips, and ticker bars with no plugin required.

16 Mar 2026 Scroll

Apple-style scroll image sequences with GSAP and canvas

Build a scroll-driven image sequence with GSAP ScrollTrigger and canvas: frame preloading, WebP sizing, HiDPI rendering, and a reduced-motion fallback.

8 Mar 2026 Comparison

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.

2 Mar 2026 WordPress

Custom Cursor Effects for WordPress

Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.

20 Feb 2026 Text effects

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.

14 Feb 2026 Beginners

Animation for Content Editors

You manage the website content, but animations feel like a black box. Learn the vocabulary, know what's possible, and talk to developers effectively.

7 Feb 2026 Webflow

Webflow Custom Animations with GSAP

Webflow's interactions cover a lot, but some effects need custom code. Learn when to reach for GSAP and how to add it to your Webflow projects.

3 Feb 2026 AI workflow

Using AI to Customize GSAP Effects

Use ChatGPT, Claude, and other AI assistants to customize, integrate, and debug GSAP Vault effects. Includes prompts and workflow tips.

27 Jan 2026 Scroll

How to animate on scroll with GSAP ScrollTrigger

How to animate on scroll with GSAP ScrollTrigger: reveals, staggers, scrubbing, pinning and reduced motion, plus when CSS scroll-driven animation is enough.

18 Jan 2026 WordPress

Adding a Text Scramble Effect to WordPress

Add a simple text decode animation to your WordPress site using GSAP. Text appears scrambled and reveals on scroll - no plugin required.

8 Jan 2026 Performance

GSAP vs CSS Animations: A Practical Guide

When should you use CSS animations versus GSAP? Learn the practical differences, performance trade-offs, and when each approach makes sense.