Three interactive website templates just landed in the vault, and they are a different kind of product from everything else here. Until now, GSAP Vault has sold individual effects: a marquee, a card stack, a scramble headline. The new templates go a step further. Each one is a complete, deployable website with real art direction, assembled from several of those effects working together on one page.

If you have ever bought a static theme, dropped it onto your server, and then spent a weekend wishing it moved like the demo, this is the fix.

What is an interactive website template?

An interactive website template is a ready-to-deploy web page whose layout, styling, and motion are all included and pre-wired. Unlike a static theme, which ships flat and leaves you to add animation yourself, an animated website template arrives with its scroll effects, hover states, and transitions already built and tuned. You swap in your own text, images, and links, then publish.

The GSAP website templates in the vault are plain HTML, CSS, and JavaScript. They load GSAP from a CDN and have no build step, no bundler, and no framework lock-in. That means you can open the folder, edit the content, and deploy the same files to Netlify, Vercel, GitHub Pages, or any web server without running a single command.

Why templates built from tested effects beat static themes

Most website templates you can buy fall into one of two camps. Either they are static and lifeless, or they are animated but built on a fragile pile of one-off scripts that break the moment you touch them. GSAP Vault templates sit in a third camp.

Each template is composed from individual GSAP Vault effects that already exist as standalone products in the effects library. The hover image trail, the count-up stats, the horizontal scroll section: these are shipped, documented effects that people already use in production. A template is those parts, arranged into a full page with a consistent visual identity.

That approach has practical benefits:

  • The motion is production-tested. Every effect inside a template has been shipped and refined on its own first.
  • You can learn how the pieces fit. Seeing several effects share one gsap.context and one gsap.matchMedia on a real page teaches you more than any isolated demo.
  • You can extend it with more effects. Because the building blocks come from the same library, adding another vault effect to a template feels native, not bolted on.
  • Accessibility is handled. Reduced-motion users get a complete static page rather than a broken one, and keyboard navigation is supported throughout.

GSAP itself is now used by over 11 million websites and is 100% free, including every plugin that used to sit behind the paid Club membership. These templates lean on that: ScrollTrigger, SplitText, and Draggable all load straight from the public CDN, so there is nothing extra to license or install.

Template 1: Creative Portfolio Template

The Creative Portfolio Template is a one-page site for studios, freelancers, and agencies. It has a confident art direction of its own: a Klein blue hero slab, editorial serif typography, and poster-style project artwork. It does not look like a default AI layout, and it does not look like the rest of the vault. It looks like a portfolio you would be happy to send a client.

Here is what is composed into the page:

  • Masked SplitText hero reveal. The headline rises character by character from behind a mask.
  • Seamless client logo marquee. Six styled placeholder wordmarks loop endlessly, with adjustable speed and direction.
  • Grid-aware stagger reveal on project cards. Cards wipe in with a clip-path reveal, staggered by their position in the grid.
  • Pinned horizontal case-study scroll. The section locks to the viewport while case studies scrub sideways, tracked by a progress bar. Keyboard users can move through it too.
  • Count-up stats. Numbers count from zero on entry, with locale-aware formatting, prefixes, and suffixes.
  • Magnetic buttons. Every call to action pulls gently toward the cursor, driven by gsap.quickTo.

Plugins: ScrollTrigger and SplitText. It uses Lenis for smooth scrolling, which is wired in and fully optional. Reduced motion renders the whole page static, including stacking the horizontal case studies vertically.

Template 2: Music Festival Template

The Music Festival Template is a one-page site for festivals, club nights, gigs, and launch parties. Where the portfolio is restrained, this one is loud. It uses a flyer-style art direction: a violet night ground, hot pink and tangerine inks, condensed poster capitals, and a film grain overlay across the whole page.

Here is what is composed into the page:

  • Glyph scramble hero text. The headline and every section heading resolve out of random glyphs, locking left to right.
  • Hover image trail on the lineup. Moving the cursor across the artist names spawns a trail of poster tiles, art-directed with six gradient variants.
  • Draggable set-times card deck. Swipe stage cards away or use the arrow buttons, with a live counter tracking your position.
  • 3D tilting ticket cards. Ticket cards tilt in three dimensions under the cursor, driven by gsap.quickTo.
  • Skewed poster-slap scroll reveals. Every section lands with a skewed, punchy reveal.

Plugins: ScrollTrigger and Draggable. It uses Lenis for smooth scrolling, again fully optional. Reduced motion renders the page static, and the card deck falls back to a plain, readable list without any JavaScript.

Template 3: Product Launch Template

The Product Launch Template is a one-page site for drinks, snacks, cosmetics, and anything else that ships in a box. Where the portfolio is restrained and the festival is loud, this one is sunny: a saturated golden ground, thick ink linework, sticker-sheet cards, and product cans drawn entirely in CSS, so there are no image assets to license or swap.

Here is what is composed into the page:

  • Bouncy word-pop hero. The headline pops in word by word with an elastic bounce, with a rotated sticker chip on the key word and fizz bubbles rising behind the can.
  • Rotating circular badge. A circular SVG badge with curved text spins slowly in the hero.
  • Seamless ink ticker. A looping ticker strip carries the launch messaging, with adjustable pixel-per-second speed.
  • Elastic sticker cards. Benefit cards snap in on scroll and squish and wobble on hover.
  • Pinned flavour switcher. The signature section: the can stays pinned while the entire section retints to each flavour’s colour as its panel scrolls past, crossfading the matching can.

Plugins: ScrollTrigger only. It uses Lenis for smooth scrolling, fully optional as always. Reduced motion gets a complete static page, and the flavour switcher falls back to stacked flavour cards without any JavaScript.

How deployment works: no build step

All three templates are static files. There is no compilation, no npm install, no framework to learn. The workflow is:

  1. Open the template folder and edit the HTML to add your own copy, images, and links.
  2. Adjust the CSS variables if you want to shift the colours or type.
  3. Upload the files to your host.

Because there is no build step, the templates deploy to Netlify, Vercel, GitHub Pages, or any plain web server without changes. GSAP loads from a CDN, so the only requirement on the host side is the ability to serve static files. That is every host.

This also means no framework lock-in. You are not committing to React, Vue, Astro, or anything else. If you later want to move a template into a larger framework project, the markup and the GSAP code come with you unchanged.

Pricing and licensing

Here are the facts, stated plainly for anyone comparing options:

  • Each template is £5. That is the same price as an individual effect.
  • The standard license covers unlimited personal and commercial projects. The only restrictions are no redistribution and no competing products.
  • All three templates are included in the £29 All-Access Bundle. The bundle covers every current premium effect, all three templates, and every future release, for a single payment.

If you want one template, buy it for £5. If you want more than that, keep reading.

The All-Access Bundle: everything for £29

Buying the three templates individually costs £15. For £29, the All-Access Bundle includes all three templates, all 24 premium effects, and every effect and template released in the future. Bought separately, the current catalogue alone comes to £135, so the bundle pays for itself the moment you want a second template and a handful of effects to extend it with.

It is a one-time payment, not a subscription. Future releases are simply added to your library, and templates are exactly the kind of release the bundle was built for: each new one lands in your account at no extra cost.

Get the All-Access Bundle →

Where to start

These are the first three interactive web templates in the vault, and more are on the way. Each one takes effects that already work and arranges them into a site you can ship today.

Browse the templates →