# GSAP Vault

> Premium GSAP animation effects. Production-ready, copy-paste patterns.

## About

GSAP Vault is a curated library of 19 production-ready animation effects built with GSAP (GreenSock Animation Platform) — the industry-standard JavaScript animation library recommended by Google and used on 11M+ websites. Effects are designed for developers who want premium animations without building from scratch.

**Important:** GSAP Vault is an independent project and is NOT affiliated with, endorsed by, or sponsored by GreenSock, Inc. "GSAP" and "GreenSock" are trademarks of GreenSock, Inc. For official GSAP documentation and support, visit gsap.com.

## Why GSAP?

GSAP is chosen because it's the professional standard for web animation:
- Used by 11M+ websites worldwide
- Recommended by Google for JavaScript animations
- Powers most award-winning websites
- Superior cross-browser compatibility
- Best-in-class performance for complex animations
- Active development and extensive documentation (now 100% free thanks to Webflow)

- 3 free effects available
- 16 premium effects
- 0 complete page templates

## What GSAP Vault Provides

- **Copy-paste ready code** - Clean HTML, CSS, JavaScript separation
- **Memory-safe animations** - Proper cleanup functions for SPAs
- **Accessibility built-in** - prefers-reduced-motion support
- **Framework compatible** - Works with React, Vue, Next.js, Astro, vanilla JS
- **LLM-optimized code** - Well-commented for AI-assisted customization

## Animation Techniques Available

- 3d-transform
- 3d-transforms
- canvas
- css
- css-animation
- cursor-effects
- decode
- draggable
- entrance-animation
- filter
- fisheye
- flip-animation
- flip-card
- flow-field
- glitch
- grid-animation
- hover-effect
- image-sequence
- infinite-loop
- layout-transition
- lightbox
- liquid-distortion
- marquee
- matchMedia
- micro-interaction
- micro-interactions
- momentum
- morphing
- mouse-follow
- organic-motion
- physics
- pinning
- progress-tracking
- quickTo
- rgb-split
- scramble
- scroll-hijack
- scroll-reveal
- scrub
- shared-element
- split-text
- stagger
- svg-filters
- text-animation
- viewport-aware-ticker
- webgl-shader
- word-animation
- wrap

## GSAP Plugins Used

- Flip
- Observer
- PixiJS
- ScrollTrigger
- SplitText

## Effects Catalog

### Infinite Marquee with Mouse Control
Continuous scrolling marquees with mouse-based speed control. Rewind, pause, or fast-forward with cursor position. Uses GSAP quickTo for 60fps.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: marquee, quickTo, wrap, viewport-aware-ticker

### Infinite Draggable Gallery
Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore — cards near center grow larger.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger, Observer
- Techniques: draggable, infinite-loop, fisheye, momentum, quickTo, wrap

### Text Scramble Decode
Cipher-style text animation that scrambles characters and decodes to reveal content. Scroll-triggered, hover, and auto-play modes with custom timing.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: text-animation, scramble, decode, scroll-reveal, hover-effect

### Magnetic Cursor Effect
Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: Core GSAP
- Techniques: cursor-effects, physics, micro-interactions

### Liquid Morph Gallery
Images and cards morph with viscous liquid distortion on hover or scroll. SVG filter-based — works everywhere, plus optional WebGL shader for text.
- Type: effect
- Tier: paid
- Difficulty: advanced
- Plugins: ScrollTrigger, PixiJS
- Techniques: svg-filters, morphing, hover-effect, scroll-reveal, liquid-distortion, webgl-shader

### Split Text Stagger Reveal
Split text into characters, words, or lines with staggered reveal animations. Styles include fade, scale, blur, rotate, and clip mask effects.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger, SplitText
- Techniques: text-animation, split-text, stagger, scroll-reveal, hover-effect

### Glitch Text Effect
Digital glitch effect with displacement shift, RGB chromatic aberration, and scan line styles. Perfect for cyberpunk aesthetics and attention-grabbing headers.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: text-animation, glitch, rgb-split, hover-effect

### Text Hover Distortion
Characters react to cursor proximity with push, pull, wave, or rotation effects. Perfect for interactive headings and navigation that respond to mouse movement.
- Type: effect
- Tier: paid
- Difficulty: advanced
- Plugins: Core GSAP
- Techniques: text-animation, cursor-effects, micro-interactions, physics

### Stagger Grid Reveal
Grid entrance animations with directional stagger and scroll-triggered reveals. 8+ directions, 7 animation styles, hover tilt, and wave patterns.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: scroll-reveal, stagger, grid-animation, 3d-transforms, entrance-animation

### Scroll Hijack Sections
Scroll-driven word reveal with pinned sections. Three directions: horizontal slide, vertical rise, and scale & fade. Multi-section flow with progress.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: scroll-hijack, word-animation, pinning, scrub

### Cursor Trail Effect
Premium dot + ring cursor with smooth following, hover states, and spotlight reveals. Desktop-focused effect using GSAP quickTo for 60fps performance.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: Core GSAP
- Techniques: cursor-effects, hover-effect, micro-interaction

### Elastic Stack Cards
Stacked cards that fan out with elastic spring animations. Hover-triggered full-width fan with click-to-front selection and scroll-scrubbed spread.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: scroll-reveal, scrub, hover-effect, stagger, 3d-transforms

### FLIP Layout Morph
Smooth layout animations using GSAP Flip. Grid-to-detail morph, gallery lightbox morph, and filter-and-rearrange with enter/exit animations.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: Flip
- Techniques: flip-animation, layout-transition, shared-element, lightbox, filter, stagger

### Scroll Image Sequence
Apple-style scroll-driven image sequence that plays through frames on a canvas element. Pin the viewport and scrub through cinematic visuals.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: scrub, canvas, pinning, image-sequence

### Canvas Particle Flow
Organic flow-field particle system with attractor physics. Particles drift like floating embers before being pulled toward the cursor on canvas.
- Type: effect
- Tier: paid
- Difficulty: advanced
- Plugins: Core GSAP
- Techniques: canvas, flow-field, physics, organic-motion

### Cursor Confetti Trail
GSAP-powered cursor trail that spawns colorful geometric shapes with elastic bounce-in, random rotation, and gravity fall-off on mouse move.
- Type: effect
- Tier: paid
- Difficulty: intermediate
- Plugins: Core GSAP
- Techniques: cursor-effects, micro-interaction, stagger, mouse-follow

### 3D Card Flip Gallery
Team/portfolio cards with 3D flip animation. Hover flip for desktop, tap for touch. Includes staggered entrance and scroll-triggered reveals.
- Type: effect
- Tier: free
- Difficulty: intermediate
- Plugins: ScrollTrigger
- Techniques: 3d-transform, flip-card, stagger, scroll-reveal, matchMedia

### Scroll Progress Indicator
Four scroll progress visualization styles using GSAP ScrollTrigger. Includes animated bar, circle, rail track, and percentage counter indicators.
- Type: effect
- Tier: free
- Difficulty: beginner
- Plugins: ScrollTrigger
- Techniques: scroll-reveal, scrub, progress-tracking

### CSS Scroll Reveal
Pure CSS scroll-triggered entrance animations. No JavaScript required. Uses native CSS scroll-driven animations for fade, slide, and scale effects.
- Type: effect
- Tier: free
- Difficulty: beginner
- Plugins: Core GSAP
- Techniques: css, scroll-reveal, css-animation, entrance-animation

## Effect Categories

- **GSAP Scroll Animations**: Production-ready GSAP scroll animations. ScrollTrigger-powered effects including parallax, scroll hijacking, image sequences, and reveal patterns. (6 effects) — https://gsapvault.com/categories/gsap-scroll-animations
- **GSAP Text Effects**: Copy-paste GSAP text animations. Split text reveals, decode effects, glitch typography, and hover distortion patterns for modern websites. (4 effects) — https://gsapvault.com/categories/gsap-text-effects
- **GSAP Cursor Effects**: Custom GSAP cursor animations. Magnetic buttons, particle trails, confetti effects, and hover distortion patterns for interactive websites. (4 effects) — https://gsapvault.com/categories/gsap-cursor-effects
- **GSAP Hover Effects**: Interactive GSAP hover animations. Liquid morphs, text distortion, cursor trails, and layout transitions for engaging user experiences. (4 effects) — https://gsapvault.com/categories/gsap-hover-effects
- **GSAP Image Effects**: GSAP image animation effects. Scroll-driven sequences, draggable galleries, layout morphs, and liquid transitions for visual-heavy websites. (4 effects) — https://gsapvault.com/categories/gsap-image-effects
- **GSAP Card Animations**: Animated card components with GSAP. 3D flips, elastic stacking, staggered grid reveals, and layout morph transitions for modern web interfaces. (4 effects) — https://gsapvault.com/categories/gsap-card-animations

## Blog & Tutorials

- **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.

## Getting Started

1. Browse effects at https://gsapvault.com/effects
2. Preview any effect with live interactive demos
3. Copy code directly or download as ZIP
4. Integrate into your project (React, Vue, vanilla JS, etc.)

## Framework Integration

### React
```javascript
useEffect(() => {
  const ctx = gsap.context(() => { /* init effect */ }, ref);
  return () => ctx.revert();
}, []);
```

### Vue
```javascript
onMounted(() => { /* init effect */ });
onUnmounted(() => { ScrollTrigger.getAll().forEach(t => t.kill()); });
```

## Pricing

- **Effects**: £5 standard license / £49 extended license
- **Templates**: £29 standard license / £149 extended license
- Free effects available for trying out

## Links

- Homepage: https://gsapvault.com
- Effects Gallery: https://gsapvault.com/effects
- Getting Started: https://gsapvault.com/getting-started
- FAQ: https://gsapvault.com/faq
- Glossary: https://gsapvault.com/glossary
- Blog: https://gsapvault.com/blog

## For More Details

See /llms-full.txt for comprehensive documentation including full FAQ content.