Featured
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.
Read guide GSAP Vault blog 21 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.
Browse every article Start here
Featured guides
In-depth articles chosen for their practical value.
Swipe or use arrows
The archive
Latest articles
Showing all 19 articles
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 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.
Interactive website templates built with GSAP
Three animated GSAP website templates: creative portfolio, music festival, and product launch. Plain HTML, CSS, and JS with no build step, £10 each.
How to animate an element along an SVG path with GSAP
Animate an HTML element along an SVG path on scroll using GSAP MotionPathPlugin and ScrollTrigger, with responsive alignment and reduced motion support.
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.
52 GSAP animation examples with code (2026)
52 production-ready GSAP animation examples with code: scroll, text, cursor, and canvas effects. Eight are completely free with copy-paste snippets below.
Why GSAP animations get janky and how to fix it
Jank comes from the wrong properties, layout thrash, and heavy scroll work. Learn how to keep GSAP animations on the compositor and hitting 60fps.
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.
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.
Apple-Style Scroll Image Sequences
Create a scroll-driven image sequence that plays through frames as users scroll. Uses GSAP ScrollTrigger and canvas for smooth frame-by-frame playback.
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.
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.
Text Animations with GSAP: 4 Approaches
Split reveals, scramble decodes, glitch effects, and cursor reactions. Learn when each text animation approach fits and how to build them.
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.
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.
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.
Animate on Scroll: 3 Approaches Compared
Learn to trigger animations on scroll. Compare CSS scroll animations, Intersection Observer, and GSAP ScrollTrigger to find the right approach.
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.
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.
No articles under this topic yet.