Frequently asked questions

Everything you need to know about GSAP Vault, web animations, and using effects in your projects.

63 questions

About GSAP Vault

What is GSAP Vault?

GSAP Vault is a collection of premium, production-ready animation effects built with GSAP (GreenSock Animation Platform). Each effect is designed to be copy-paste ready, with clean code that you can drop into any project and customize to fit your needs.

Link to this answer
Who is GSAP Vault for?

GSAP Vault is for web developers who are comfortable working with HTML, CSS, and JavaScript. These effects are designed for people who can read code, adapt it to their needs, and integrate it into their own projects. If you're not comfortable editing code, these effects may not be suitable for you.

Link to this answer
What skill level do I need?

You should be comfortable with front-end development basics: HTML structure, CSS styling, and JavaScript fundamentals. Familiarity with GSAP is helpful but not required—our code is well-commented and includes LLM-friendly documentation that makes customization straightforward for anyone who can work with code.

Link to this answer
What's included when I purchase an effect?

Each effect includes the complete source code (HTML, CSS, JavaScript), a live demo, human-readable customization documentation, an optional product-specific AI setup prompt, and any required assets. The code is well-commented and follows best practices for performance and accessibility.

Link to this answer
What's the difference between effects and templates?

Effects are individual animation patterns (like scroll reveals, text animations, or interactive galleries) that you integrate into your own designs. Templates are complete static page designs that include layout, navigation, footer, and multiple coordinated effects working together, shipped as plain HTML, CSS, and JavaScript files. Effects start at £5 each; templates cost £10 because each one is a complete deployable site. Both are included in The Vault, along with UI elements.

Link to this answer
What's the difference between free and paid effects?

Free effects are fully functional and production-ready, great for trying out GSAP Vault. Paid effects are typically more complex, featuring advanced techniques like physics-based animations, 3D transforms, or intricate scroll interactions that require more development expertise to build. There are also 4 free templates, so you can see the full quality of a template build before buying one.

Link to this answer
Can I see a live preview before purchasing?

Yes. Every effect has a live, interactive demo you can explore before purchasing. The demo shows the effect in action and lets you interact with it to understand how it works.

Link to this answer
Is GSAP Vault affiliated with GSAP or GreenSock?

No. GSAP Vault is an independent project and is not affiliated with, endorsed by, or sponsored by GreenSock, Inc. However, we follow GSAP-recommended best practices for performance, memory management, and accessibility in all our effects. We use "GSAP" in our name to indicate compatibility with the GSAP animation library. For official GSAP documentation, licensing, and support, visit gsap.com.

Link to this answer

Pricing & Purchases

What does The Vault include?

The Vault is a one-time purchase of £99 that unlocks every included catalogue product line and its future releases, all under the standard license (unlimited personal and commercial projects). Bought individually the 200+ premium products in it come to over £1,500. There is no subscription and no renewal for catalogue access: future releases in included lines are included at no further cost. Future releases are included when made available in covered catalogue lines. No particular new product, release schedule, quantity or continued catalogue expansion is promised. Standalone plugins, builders, AI tools and other software or services with ongoing maintenance or operating requirements may be excluded and sold separately. Any exclusion will be stated on the product offer.

Link to this answer
What is a section pass?

A section pass is a one-time purchase that unlocks one complete product line instead of one product. There are three: the Effects Pass (£50, every current and future premium effect, 99 of them today); the Templates Pass (£50, every current and future premium template, 69 of them today); the UI Elements Pass (£50, every current and future premium UI element and component kit, 48 of them today). A pass covers that line only, so an Effects Pass gives you no access to templates or UI elements. Everything released into a covered line later is included at no extra cost, which is the point of buying the line rather than the items in it.

Link to this answer
Do section passes include products released after I buy?

Yes, for the line the pass covers, with no end date and no renewal. Access is resolved from the product line rather than from a list of slugs copied at checkout, so a product released tomorrow appears in your library unlocked, exactly like The Vault does across all three lines.

Link to this answer
If I buy an effect now, do I lose that money when I upgrade to the Vault later?

No. Up to £25 of what you spent comes off the first access product you buy, a section pass or the £99 Vault. Buy a single effect or template to try us out, and when you upgrade, what you already spent is deducted at checkout, up to a maximum of £25. It is used once: if it came off a pass, it is not applied again when you later upgrade to The Vault, though the full amount you paid for the pass is. It is a discount on the upgrade, not a refund, so nothing is paid back to you. It applies automatically with no code to enter. The only requirement is that you are logged in when you upgrade. Buying as a guest still counts: we create an account against your email at checkout and send you a sign-in link, so use that same email and your earlier spend is waiting.

Link to this answer
Is the Vault upgrade credit capped?

Yes, at £25, and it is used once. That is the price of one component kit. If you have spent more than £25 on individual items, the credit is still £25, not the full amount: it is a "try one first and you won't pay twice for it" offer rather than a running store credit. It comes off the first access product you buy, a section pass or The Vault, not both. So once your individual spend passes £25, buying more before you upgrade costs you more than starting with the Vault would have.

Link to this answer
Can I upgrade from a section pass to The Vault?

Yes, and what you paid for the pass comes off in full. Section spend is credited pound for pound with no cap, unlike individual purchases which are capped at £25. So after one pass at £50, The Vault costs £49; after two, it costs £1, which is why we would rather sell you The Vault than a second pass. What is credited is the amount you actually paid: if some individual spend already came off the pass, that pot is used up and the pass credits its discounted price. The credit is calculated from your account's purchase records at checkout, so sign in first; it is a discount, not a refund.

Link to this answer
What payment methods do you accept?

We accept all major credit/debit cards through Stripe. Payments are processed securely in GBP with automatic VAT handling for EU customers.

Link to this answer
What's your refund policy?

Contact us within 14 days if your purchase is not right for you. If you are unhappy with an individual product or it is not what you expected, we will work with you to put it right. If we cannot, we will refund you, even if you have viewed, downloaded or tried the code. With a section pass or The Vault, refunds are reviewed case by case, at our discretion, taking into account why the purchase was not right for you and the portion of the collection accessed or downloaded. Anything faulty or materially not as described will be fixed, replaced or refunded whatever the access. A refund revokes access and terminates the licence for what was refunded. This does not affect your statutory rights. Full policy at /refunds.

Link to this answer
How much does GSAP cost? Do I need to pay for it?

Nothing. GSAP is free, including every plugin, including the plugins that used to sit behind a paid membership such as SplitText, MorphSVG and DrawSVG. GreenSock removed the paid tiers in GSAP 3.13 after Webflow took on the project, so tutorials and forum threads quoting a yearly membership price predate that change and are out of date. There is no licence key, no seat count and no monthly fee. GSAP Vault is a separate, independent shop: the animation library is free, and what you pay us for is finished effects and templates built with it. Our own prices are on the pricing page.

Link to this answer
Has GSAP Vault's pricing changed?

Yes. The Vault is £99 as a one-time purchase, effects start at £5 and UI elements are £5 each, templates are £10 each, and UI component kits are £25 each. Lower Vault prices quoted in older articles, forum posts, video descriptions or AI answers predate a change made in August 2026 and are out of date; the pricing page carries the only current figures. Anyone who bought before the change keeps everything they bought, future releases included, and is never asked to pay the difference.

Link to this answer
Why has The Vault gone up in price?

Because the library it covers keeps growing, and the price is reviewed against the size of that library rather than left frozen. When the Vault was last priced at £39 it covered two product lines and 65 premium products; it now covers four and holds over 200, so that same £39 would be buying more than twice what it was set against. £99 across the current catalogue puts it back in proportion, which is the intent: what you pay should stay roughly in line with what is in it. The money funds continued production — new effects, templates and UI elements are still being added and the existing ones maintained — and future releases in covered catalogue lines are included at no further cost when published. No particular release schedule or continued expansion is promised. The rise does not push a single-line buyer to the full price: a section pass covers one complete product line — every current and future effect, or template, or UI element — for £50.

Link to this answer

Licensing & Usage

Can I use effects and templates on client projects?

Yes. The standard license allows you to use each purchased product (effect, template, or UI element) in unlimited commercial projects, including client work. Buy once and use it in as many builds as you like.

Link to this answer
Can I use effects on multiple websites?

Yes. A standard license covers unlimited websites and projects, personal or commercial. There is no per-project limit; the only restriction is redistribution (you can't resell the code or include it in themes, templates, or kits you distribute).

Link to this answer
Can I modify the effect code?

Absolutely. You're encouraged to customize the code to fit your project. Change colors, timing, easing, layout—whatever you need. The code is yours to adapt.

Link to this answer
Do I need to credit GSAP Vault?

No, attribution is not required for our code. You're free to use the effects without any visible credit to GSAP Vault. The exception is a bundled third-party asset under a licence that requires credit, such as a CC BY 3D model: the product page and README name it, and you keep that creator's credit when you publish.

Link to this answer
Can I resell effects or include them in templates?

No. The standard license does not permit redistribution, so you cannot include effects in themes, templates, UI kits, or code collections you sell or give away, and you cannot use them to build a competing effects library or marketplace. If you need redistribution rights, get in touch via the contact page to discuss licensing.

Link to this answer
Can I use effects in portfolio or open-source projects?

Yes! Portfolio sites and open-source projects are covered under the standard license, as long as the effect code itself isn't the primary product being distributed.

Link to this answer
Do you offer team or agency licenses?

You don't need one. A licence covers the buyer's projects, including those of a company the buyer owns or works for, and anyone implementing it into those projects (colleagues, contractors or an agency) is covered for that work. What it does not cover is someone else using the files in projects of their own. There is no separate team price list.

Link to this answer
How is GSAP's licence different from the GSAP Vault licence?

They cover different things and you need both. GSAP itself is the animation library, licensed to you free by GreenSock under the Standard “No Charge” GSAP License (gsap.com/community/standard-license); nothing you buy from us changes that, and nothing we sell is required to use GSAP. The GSAP Vault licence covers only the code we wrote: the effect and template source you buy from this site. It is a standard licence, one payment, unlimited personal and commercial projects, no attribution required for our code, with redistribution and competing products excluded. So a client site using a GSAP Vault effect is relying on two separate permissions: GreenSock's for the library, ours for our code. We are an independent shop and not affiliated with GreenSock or Webflow.

Link to this answer
Is GSAP free for commercial use?

Yes. GreenSock's Standard “No Charge” GSAP License permits commercial use at no cost: you can use GSAP on any website, web app or digital interface, for clients or for your own products, without paying anything and without a per-project fee. The one restriction it names is using GSAP to build a no-code visual animation tool that competes with Webflow, or reverse engineering it to build one, which is not something a normal site build comes near. That licence is GreenSock's, not ours, and it is the only authority on its own terms, so read it at gsap.com/community/standard-license before relying on this summary. Checked August 2026; GreenSock can revise it at any time.

Link to this answer

Website Templates

What is an interactive website template?

An interactive website template is a complete, pre-built web page where animation and interaction are part of the design: scroll-triggered reveals, cursor effects, draggable elements, and animated text, rather than static sections. GSAP Vault templates are interactive templates built with GSAP, the animation library used by over 11 million websites. Most are a deployable one-page site in plain HTML, CSS, and JavaScript; a few ship multiple linked pages where the design calls for it. Either way you customise them with your own content.

Link to this answer
Are templates WordPress, Ghost, Webflow, or Shopify themes?

No. GSAP Vault templates are static site designs: HTML, CSS, and JavaScript files you edit and deploy yourself. They are not installable themes for any CMS, so there is no theme uploader, admin panel, page builder, or content database involved, and you edit the content in the HTML rather than in a dashboard. Developers regularly port the markup and animation code into a WordPress theme, Shopify section, or Astro/React component, and the licence allows that, but the port is your work: we ship the static design, not a platform package.

Link to this answer
Do GSAP Vault templates require a framework or build step?

No. Templates are plain HTML, CSS, and JavaScript with GSAP loaded from a CDN. There is no build step, no npm install, and no framework lock-in: you can deploy a template as static files to Netlify, Vercel, GitHub Pages, or any web server, or adapt the code into React, Vue, Astro, or WordPress projects.

Link to this answer
Can I change a template's colours?

Yes, and several templates make it a one-line change. Those templates ship with multiple ready-made colour palettes (four or five each) defined as CSS custom properties, so you can switch the entire palette by changing a single attribute rather than hunting through the stylesheet. Every template is also plain CSS, so you can replace the palette values with your own brand colours.

Link to this answer
Do templates work on mobile?

Yes. Templates are designed with mobile-first responsive layouts. Animations are optimized for touch devices and respect reduced motion preferences. Some complex effects may be simplified on mobile for performance reasons.

Link to this answer

Technical & Compatibility

Do effects work with React, Vue, Next.js, or Astro?

Yes. The effects are written in vanilla JavaScript and can be integrated into any framework. We provide guidance on proper initialization and cleanup for React (useEffect), Vue (onMounted/onUnmounted), and Next.js (dynamic imports).

Link to this answer
What GSAP version do effects require?

Effects are built and tested against the GSAP version pinned in their CDN links (currently 3.15.x). Effects that use plugins like SplitText or MorphSVG need GSAP 3.13 or later, the release that made every plugin free. We recommend using the latest stable version for the best compatibility and performance.

Link to this answer
What browsers are supported?

All effects are tested on modern browsers: Chrome, Firefox, Safari, and Edge. We support the last two major versions of each browser. Effects gracefully degrade on older browsers where possible.

Link to this answer
Do effects work on mobile and touch devices?

Yes. Effects are responsive by default and include touch support where applicable. Many effects use GSAP's matchMedia for different behaviors on mobile vs desktop.

Link to this answer
Are effects accessible (reduced motion, screen readers)?

Yes. Effects respect the prefers-reduced-motion media query and either disable or simplify animations for users who prefer reduced motion. Semantic HTML is used to ensure screen reader compatibility.

Link to this answer
Are effects and templates fully accessible and responsive?

Effects include prefers-reduced-motion support and are built with accessibility in mind. Templates use responsive layouts that adapt to different screen sizes. However, we do not guarantee full WCAG compliance or pixel-perfect responsiveness across every device. You should test and adapt as needed for your specific requirements and user base.

Link to this answer
What does “vibe-code ready” mean?

It means every effect and template includes an optional product-specific START-HERE-AI.md prompt alongside the normal source code and human-readable documentation. Paste it into Cursor, Claude Code, ChatGPT, Copilot, Windsurf, or another coding assistant to help integrate the product into an existing project. AI is not required: you can ignore the prompt and work directly from the README, HTML, CSS, and JavaScript.

Link to this answer
What does the AI setup prompt tell a coding assistant to do?

The prompt identifies the product, dependencies, GSAP plugins, and techniques, then tells the assistant to inspect your existing framework and conventions before editing. It requires scoped selectors, responsive behaviour, accessibility and reduced-motion support, framework-appropriate animation cleanup, asset and console checks, and a final report of every change.

Link to this answer
Does the AI setup prompt replace the documentation?

No. The prompt tells the assistant to read the supplied README and source files first. The README remains the detailed reference for developers working directly with the code, while START-HERE-AI.md is an optional integration brief for people who use an AI coding assistant.

Link to this answer
How do I handle effects with page transitions?

All effects include proper cleanup functions that kill ScrollTriggers and animations. Call the cleanup function before navigating away to prevent memory leaks. Documentation includes examples for various transition libraries.

Link to this answer

Courses

Are the courses free?

Yes. Every interactive course is free in full, including all the labs and a personal completion download. No account is required; progress stays in this browser. Clearing browser data will remove it. No purchase of any kind is required, including for company learners. Completion downloads are generated on your device without public verification and are not an accredited qualification.

Link to this answer
Do I need an account to take a course?

No. Every lab runs in your browser without signing in, and progress is kept on that device. Progress does not sync across browsers or devices, even when signed in. Clearing browser data will remove it. Fit a lab into a lunch break or a spare hour and return whenever you like. The time shown is for the whole course. Labs need a laptop or desktop; outlines are public on any device.

Link to this answer

Downloads, Updates & Support

How do I download purchased products?

After purchase, your effects, templates and UI elements appear in your Library, where you can view the full source code, copy it directly, or download the complete package. We recommend downloading your purchases promptly and keeping your own backup copies. While we aim to keep your Library accessible, we cannot guarantee perpetual availability of hosted files.

Link to this answer
How long do I have access to purchased effects?

Your purchases are available in your library indefinitely. However, we recommend downloading your files after purchase as a backup, as we cannot guarantee perpetual hosting.

Link to this answer
Do I need to back up my purchases?

Yes, we strongly recommend it. Once purchased, it's your responsibility to download and securely store the files. While we strive to maintain your Library access, GSAP Vault may not be available indefinitely, and we cannot guarantee files will always be hosted. Treat your downloads like any other digital purchase: back them up.

Link to this answer
Do I get updates to effects I've purchased?

Yes. If we update an effect for bug fixes or improvements, you'll have access to the updated version at no additional cost.

Link to this answer
How often are new effects added?

New effects are added regularly. We focus on quality over quantity, ensuring each effect meets our standards for code quality, performance, and real-world usefulness.

Link to this answer
Do you provide implementation support?

No. Effects are provided as-is with documentation and LLM-friendly code comments. We cannot help you integrate effects into your specific project, debug your implementation, or customize effects for your needs. You're purchasing code, not a service. For GSAP-specific questions, the GreenSock forums are an excellent resource.

Link to this answer
What if I can't get an effect working in my project?

We cannot provide custom integration work for your project, but if an individual product is not what you expected, contact us within 14 days. We will work with you to put it right or refund you if we cannot, even if you have tried the code. Effects are tested and work as demonstrated in our live previews. If you're having trouble, try the code with an AI assistant (it is written to be LLM-friendly), or consult the GreenSock forums. If the effect genuinely does not work as demonstrated, that is different: tell us and we will fix it, replace it or refund it. Tell us what did not meet your expectations so we can find a suitable solution. Collection access is reviewed case by case under our refund policy.

Link to this answer
Can I request custom effects?

We're always looking to expand the library based on what developers need. While we don't offer custom development services, you can suggest effects you'd like to see added to the collection.

Link to this answer

Web Animation Concepts

What is GSAP?

GSAP (GreenSock Animation Platform) is a professional-grade JavaScript animation library used by over 11 million websites worldwide, including Google, Apple, Microsoft, and NASA. It provides a consistent, high-performance API for animating CSS properties, SVG, canvas, and more. GSAP has been the industry standard for web animation since 2008.

Link to this answer
Why use GSAP instead of CSS animations?

CSS animations work well for simple transitions, but GSAP excels at complex sequences, scroll-triggered effects, and precise timing control. GSAP offers better browser consistency, easier debugging, more easing options, and the ability to animate things CSS can't (like SVG paths). It also provides reliable callbacks and timeline sequencing that CSS lacks.

Link to this answer
What's the difference between tweens and timelines?

A tween is a single animation of one or more properties. A timeline is a sequence of tweens that can play in order or overlap. Timelines let you choreograph complex animations, control the entire sequence as one unit, and easily adjust timing without recalculating delays.

Link to this answer
What are easing functions?

Easing functions control how an animation progresses over time. Linear easing moves at constant speed, but most animations use curves like ease-out (fast start, slow end) or ease-in-out (slow start and end). Easing makes animations feel natural and polished rather than mechanical.

Link to this answer
What is ScrollTrigger and how does it work?

ScrollTrigger is a GSAP plugin that connects animations to scroll position. You define when an animation starts and ends based on where an element is in the viewport. It handles scrubbing (progress tied to scroll), pinning (fixing elements while scrolling), and triggering animations at specific scroll points.

Link to this answer
How do scroll-triggered animations work?

Scroll-triggered animations use the browser's scroll position to control when and how animations play. As you scroll, the animation either plays at a set point (trigger-based) or updates continuously with scroll position (scrub-based). This creates engaging experiences where content reveals as you navigate the page.

Link to this answer
What is a parallax effect?

Parallax is when elements move at different speeds as you scroll, creating an illusion of depth. Background elements might move slower than foreground elements, mimicking how distant objects appear to move less when you're in motion. It adds visual interest and dimensionality to web pages.

Link to this answer
What makes a good web animation?

Good web animations are purposeful—they guide attention, provide feedback, or enhance understanding. They're smooth (60fps), subtle (not distracting), and respect user preferences (reduced motion). They should feel natural, have appropriate timing, and never block the user from accomplishing their goals.

Link to this answer
How do I optimize animations for performance?

Animate transform and opacity properties when possible (they don't trigger layout). Use will-change sparingly for elements about to animate. Avoid animating many elements simultaneously. Use GSAP's built-in optimizations and its set() method for instant changes. Test on lower-powered devices.

Link to this answer
Are JavaScript animations bad for SEO?

No. Search engines can render JavaScript, and animations don't affect content indexing. However, ensure important content isn't hidden behind animations that require interaction. Use semantic HTML, and the actual text content will be indexed regardless of how it's animated.

Link to this answer

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.