Getting Started
Everything you need to start using GSAP Vault effects in your projects.
GSAP Basics
GSAP (GreenSock Animation Platform) is the industry-standard JavaScript animation library used by millions of websites worldwide. If you're new to GSAP, here's what you need to know.
What GSAP Does
GSAP animates any numeric property—CSS values, SVG attributes, object properties, even canvas elements. It provides a consistent, high-performance API that works reliably across all browsers.
Core Concepts
- Tweens — Single animations that change properties over time
- Timelines — Sequences of tweens you can control as one unit
- Easing — Functions that control animation speed curves
- ScrollTrigger — Plugin that connects animations to scroll position
Why Professionals Choose GSAP
- Rock-solid browser compatibility
- Superior performance, especially for complex animations
- Precise timing control and sequencing
- Active community and extensive documentation
Learn more: The official GSAP documentation is excellent for deep dives into any topic.
How GSAP Vault Effects Work
Every effect in GSAP Vault is designed to be self-contained and production-ready. Here's what makes them easy to use.
Copy-Paste Ready
Clean separation of HTML, CSS, and JavaScript. No build step required—just copy the code into your project.
Memory Safe
Built-in cleanup functions that properly kill ScrollTriggers and animations. No memory leaks with page navigation.
Responsive by Default
Effects use GSAP's matchMedia for breakpoint-aware behavior. Different animations for mobile vs desktop when appropriate.
Accessibility Considered
Respects prefers-reduced-motion. Effects gracefully disable or simplify for users who prefer less motion.
Installation Steps
Getting an effect running in your project takes just a few steps.
Include GSAP
Add GSAP to your project. The easiest way is via CDN:
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js"></script> Or install via npm: npm install gsap
Copy the Effect Files
From your Library, copy the HTML markup, CSS styles, and JavaScript code. Each section is clearly labeled and ready to paste.
Add the HTML Structure
Paste the HTML where you want the effect to appear. The markup includes necessary classes and data attributes.
Include the CSS
Add the styles to your stylesheet or in a <style> tag. Most effects use CSS custom properties for easy customization.
Initialize the Effect
Most effects auto-initialize when the DOM is ready. If you need manual control, call the exported init function:
// Auto-initializes on DOMContentLoaded // Or manually: effectName.init(); Customize
Adjust CSS custom properties, animation timings, easing values, and colors to match your design. All customizable values are documented.
Framework Integration
GSAP Vault effects work with any framework. Here's how to integrate them properly.
Vanilla JavaScript
The simplest setup. Include GSAP via CDN or bundler, paste the effect code, and it runs on page load.
// Effects auto-initialize document.addEventListener('DOMContentLoaded', () => // Effect is already running ); React
Initialize in useEffect and return the cleanup function to prevent memory leaks on unmount.
useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { // Effect initialization here }, containerRef); return () => ctx.revert(); }, []); Vue
Use onMounted for initialization and onUnmounted for cleanup.
onMounted(() => { gsap.registerPlugin(ScrollTrigger); // Initialize effect }); onUnmounted(() => { ScrollTrigger.getAll().forEach(t => t.kill()); }); Next.js
Use dynamic imports with ssr: false for client-only loading, or import in a 'use client' component.
'use client'; import { useEffect } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; Astro
Use client:load or client:visible directives for components, or inline scripts with is:inline for page-level effects.
<script is:inline> document.addEventListener('DOMContentLoaded', () => { // Initialize effect }); </script> Why Use Pre-built Effects?
Building complex animations from scratch takes significant time and expertise. Pre-built effects offer tangible advantages.
Production-Tested Code
Effects are tested across browsers and devices before release. You skip the debugging phase.
Performance Optimized
Written with GSAP best practices: efficient selectors, proper will-change usage, and optimized render cycles.
Accessibility Built-in
prefers-reduced-motion support, semantic HTML, and proper focus management where applicable.
Save Development Time
What might take hours to build and refine is ready to use in minutes. Focus on your project's unique features.
Learn From Professional Patterns
Study the code to understand advanced GSAP techniques. Each effect is educational as well as practical.
Consistent Quality
Every effect follows the same standards for code organization, documentation, and customization options.
Ready to Start?
Browse the effects library to find animations for your project. Free effects are a great way to try things out.