54 complete website templates with the animation built in, each with a live demo and the full source. 4 are free to download. This page covers what a GSAP template actually is, how it differs from a theme or a starter kit, and how to make one your own.
All 108 premium effects and templates, plus every future effect and template we release. That's £0.36 per item.
Buy individually now: up to £10 comes off the Vault later
A hand-picked 12 from the 54 in the catalogue, spanning portfolios, shops, venues, SaaS and editorial. 4 of the full set are free and MIT-licensed.
A GSAP website template is a complete, ready-to-deploy website whose motion is built with the GreenSock Animation Platform rather than bolted on afterwards. You get the HTML, CSS and JavaScript for every page, with the animation already wired to the content it belongs to: the hero that splits and staggers on load, the sections that reveal as they enter the viewport, the gallery that transitions between filtered states. Open it in an editor, replace the copy and images, and deploy. Designing the layout and the motion together is the point, because retrofitting animation onto a page that was not built for it is where the cost hides.
What separates a template from a demo is everything that only shows up in production. Every template here defines a behaviour at each breakpoint rather than disabling motion on mobile and hoping. Each one has a reduced-motion path that shows the finished state immediately rather than leaving content stranded invisible. Each is checked with JavaScript disabled, because a scroll reveal that hides content before the script runs is a blank page to a crawler. Those three checks are automated in the build, not left to judgement.
"Template" covers four quite different things, and the difference decides how you work with it and what you can hand to a client. Everything in this catalogue is the first row: static HTML with no build step and no platform underneath it.
| Format | You edit | What it is | Best for |
|---|---|---|---|
| HTML template | The markup directly | A complete static site: HTML, CSS and JavaScript files you open in an editor and deploy to any host. No build step, no framework, no database. | A site you want to own outright, hand to a client, or drop onto Netlify, Vercel, S3 or shared hosting without a toolchain. |
| CMS theme | Content in an admin panel | A package for a specific platform (WordPress, Shopify, Webflow) that renders content from that platform's database through its own templating language. | A site that non-technical people update daily, where the CMS is already chosen and its ecosystem matters more than the markup. |
| Starter kit | Components and data | A framework scaffold (Next.js, Astro, Nuxt) with routing, tooling and component structure in place but usually little finished design. | An application rather than a site, where the interesting work is state and data flow and the visual layer is yours to write. |
| UI kit | Everything around them | A library of individual components (buttons, cards, navs) with no page assembled from them and no content strategy implied. | Building your own layouts on a consistent visual base, when you specifically do not want a page structure imposed. |
Templates are grouped by the kind of site you are building rather than by animation technique, because that is how the requirement arrives. Each page goes deeper on one kind of site and compares every template in it.
Templates for showing your own work: studio portfolios, developer sites, photography, and CVs.
Templates for practices and service businesses that sell expertise, sessions, or projects.
Templates built around selling a product: launches, drops, and single-product pages.
Templates for places and dates: festivals, venues, restaurants, and bookable experiences.
Conversion-focused one-pagers that adapt to any vertical, including software product pages.
Working web-app interfaces: chat apps, documentation sites, and dashboard shells you deploy as the product front-end itself.
These are plain HTML, CSS and JavaScript files with no build step, so customising one is editing and refreshing. The order below is the one that avoids rework.
Unzip and open index.html in a browser, or serve the folder with any static server. There is nothing to install and no build to run. Serving it rather than opening the file directly matters only if the template fetches JSON, which a few do.
Swap the copy and images first, while the design is still the one that was tested. Real content is longer, shorter and more awkward than placeholder text, and it will tell you which sections actually need adjusting. Restyling first means doing the same work twice.
Colours, spacing and type scale are defined as custom properties at the top of the stylesheet rather than scattered through the rules. Change them there and the whole site moves together. Check text contrast after any palette change: a tint that reads fine on a large heading often fails on body copy.
Animation timings live in one place per template. When you change durations, triggers or start states, verify the two paths that are easy to break: the page with reduced motion enabled, and the page with JavaScript disabled. Content that is hidden as an animation start state must be restored in both.
:root {
--accent: #6d4aff;
--bg: #0d0d12;
--text: #f4f4f6;
--space: clamp(4rem, 10vw, 8rem);
}
/* Reveal start state, gated so it only applies
when JS is there to finish the job. */
.has-js [data-reveal] {
opacity: 0;
transform: translateY(40px);
}
@media (prefers-reduced-motion: reduce) {
.has-js [data-reveal] {
opacity: 1;
transform: none;
}
}prefers-reduced-motion is an accessibility need, not a preference to design around. The correct fallback is the finished state delivered immediately: text visible, images placed, layout settled. A template that responds to reduced motion by skipping the animation but keeping its opacity-0 start state has turned a design into an empty page for the people who most needed it not to be.
Scroll reveals work by hiding content until the script moves it. If that hidden state is in plain CSS, then a blocked script, a slow network or a crawler sees a blank section forever. Gating start states behind a has-js class means the page without JavaScript is simply the page without animation, which is the only acceptable failure mode.
Turning animation off below a breakpoint is a decision that should be visible in the layout, not a way to avoid testing. Pinned sections in particular need an explicit small-screen answer, because a pin that assumes viewport height behaves differently once a mobile browser chrome starts collapsing. Every template here is checked on an emulated phone as well as a desktop.
Smooth-scrolling libraries and ScrollTrigger both want to be the authority on scroll position. When they run on separate ticks, pinned sections drift and reveals fire at the wrong point. The fix is to drive the scroll library from gsap.ticker so both read the same position on the same frame, which is what these templates do rather than leaving it as an integration exercise.
A GSAP template is a complete website whose animation is built with the GreenSock Animation Platform and designed alongside the layout rather than added afterwards. It ships as HTML, CSS and JavaScript files covering every page and state, with the motion already wired to the content, so customising it is editing files rather than rebuilding the animation.
Yes. Several templates here are free and MIT-licensed, with the full source mirrored on GitHub and no account needed to download them. They are complete sites rather than cut-down previews, so they are a fair way to see how the paid ones are built before buying one.
No. Since the GSAP 3.13 release in April 2025 the full plugin set is free, including for commercial projects under the GSAP Standard License. Plugins that once required a paid membership, including SplitText, MorphSVG, Draggable and InertiaPlugin, are now available to everyone, so a template that uses them carries no additional licence cost.
No. Each one is plain HTML, CSS and JavaScript that runs by opening the file or serving the folder. There is nothing to install, no bundler to configure and no framework version to keep current. That also makes them straightforward to port into React, Astro, Vue or a CMS, because the animation code is not entangled with a component system.
Yes. The standard licence covers unlimited personal and commercial projects, including client work, with no per-project fee. The only restrictions are that you cannot redistribute the source as a template itself or build a competing product from it. Using one as the basis for a client site is exactly what it is for.
Both are defined as CSS custom properties at the top of each stylesheet rather than repeated through the rules, so changing the palette or type scale in one place moves the whole site. After any palette change, check the contrast of body copy specifically: a tint chosen against a large heading frequently fails the smaller text that sits on the same background.
Not inherently. GSAP drives every animation from a single requestAnimationFrame tick rather than one per tween, and these templates animate transforms and opacity, which the compositor handles without recalculating layout. The performance problems attributed to animation almost always come from animating layout properties, running effects offscreen, or leaking triggers across page transitions.
It depends on where the value of the project sits. If the design is the product, build it. If the design is a vehicle for the content and the deadline is real, a template removes the part that is genuinely slow: not writing the animation, but discovering every edge case where motion, responsive layout, accessibility and scroll behaviour interact badly. That work is already done and tested here.
The GSAP template library holds all 54 of them at £10 each, or take every template and effect in the Effects & Templates Vault for £39. Prefer one long page? Every template with a rundown and a live demo is written up in a single post.
Your cart is empty
Browse Effects