# GSAP Vault Blog

> Practical guides on web animation, GSAP tutorials, and tips for building scroll-triggered effects.

Canonical: https://gsapvault.com/blog

27 posts, newest first. Every post has a Markdown variant: append `.md` to its URL or send `Accept: text/markdown`.

- [A free visual hierarchy course for developers](https://gsapvault.com/blog/free-visual-hierarchy-course-for-developers) (2026-09-07): Introducing GSAP Vault courses, starting with six free visual hierarchy labs where you practise reading order, typography, spacing and mobile layout.
- [September 2026: site refresh and new GSAP demos](https://gsapvault.com/blog/vault-update-september-2026) (2026-09-05): 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.
- [GSAP background animation: a drifting gradient backdrop](https://gsapvault.com/blog/gsap-background-animation) (2026-09-02): Build an ambient animated background with GSAP: soft colour fields that drift behind your content, pause off screen and respect reduced motion. Complete code.
- [59 animated UI components built with GSAP (2026)](https://gsapvault.com/blog/gsap-ui-components) (2026-09-01): 59 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.
- [Why your CV should be a website (and still print as a PDF)](https://gsapvault.com/blog/cv-website-instead-of-pdf) (2026-08-22): 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.
- [Five new GSAP effects you drive with the pointer](https://gsapvault.com/blog/new-effects-august-2026) (2026-08-08): 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.
- [Shopify custom animations with GSAP](https://gsapvault.com/blog/shopify-custom-animations-gsap) (2026-07-31): Add GSAP animations to a Shopify theme: where the code goes, how to survive theme editor section reloads, and a scroll-reveal collection grid.
- [GSAP with React: useGSAP, ScrollTrigger and proper cleanup](https://gsapvault.com/blog/gsap-react-usegsap-scrolltrigger) (2026-07-26): Learn how to use GSAP in React with useGSAP, scoped selectors, ScrollTrigger cleanup, Strict Mode, Next.js, and reduced-motion support.
- [28 new website templates, and an offer: request the next one](https://gsapvault.com/blog/new-templates-july-2026) (2026-07-23): 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](https://gsapvault.com/blog/horizontal-scroll-gsap) (2026-07-22): Build a pinned horizontal scroll section with GSAP ScrollTrigger: pin, scrub, and a track that slides sideways as you scroll. Complete code included.
- [73 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) (2026-07-18): 73 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.
- [GSAP MotionPathPlugin: animate an element along an SVG path](https://gsapvault.com/blog/animate-element-along-svg-path-gsap) (2026-07-17): 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.
- [Six new GSAP effects: card stacks and more](https://gsapvault.com/blog/new-effects-july-2026) (2026-07-15): 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.
- [108 GSAP animation examples and demos with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) (2026-07-05): 108 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Nine are completely free with copy-paste snippets below.
- [GSAP performance: why animations get janky and how to fix it](https://gsapvault.com/blog/gsap-performance-guide) (2026-06-24): A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.
- [Staggered grid reveal in WordPress with GSAP](https://gsapvault.com/blog/stagger-grid-reveal-wordpress) (2026-06-10): 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](https://gsapvault.com/blog/infinite-marquee-wordpress) (2026-04-04): 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 with GSAP and canvas](https://gsapvault.com/blog/scroll-image-sequence-tutorial) (2026-03-16): Build a scroll-driven image sequence with GSAP ScrollTrigger and canvas: frame preloading, WebP sizing, HiDPI rendering, and a reduced-motion fallback.
- [GSAP vs Anime.js vs Motion Compared](https://gsapvault.com/blog/gsap-vs-animejs-vs-motion) (2026-03-08): 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](https://gsapvault.com/blog/custom-cursor-effects-wordpress) (2026-03-02): Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.
- [GSAP Text Animation: 6 Approaches and When to Use Each](https://gsapvault.com/blog/text-animations-gsap) (2026-02-20): Compare six GSAP text animations: split reveals, typewriter, scramble, glitch, scroll highlights and cursor reactions, with working code for each.
- [Animation for Content Editors](https://gsapvault.com/blog/animation-for-content-editors) (2026-02-14): 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](https://gsapvault.com/blog/webflow-custom-animations-gsap) (2026-02-07): 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](https://gsapvault.com/blog/using-ai-assistants-gsap-effects) (2026-02-03): Use ChatGPT, Claude, and other AI assistants to customize, integrate, and debug GSAP Vault effects. Includes prompts and workflow tips.
- [How to animate on scroll with GSAP ScrollTrigger](https://gsapvault.com/blog/how-to-animate-on-scroll) (2026-01-27): How to animate on scroll with GSAP ScrollTrigger: reveals, staggers, scrubbing, pinning and reduced motion, plus when CSS scroll-driven animation is enough.
- [Adding a Text Scramble Effect to WordPress](https://gsapvault.com/blog/text-scramble-wordpress) (2026-01-18): 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](https://gsapvault.com/blog/gsap-vs-css-animations) (2026-01-08): When should you use CSS animations versus GSAP? Learn the practical differences, performance trade-offs, and when each approach makes sense.
