# Multi-Page SaaS Template > A four-page SaaS product website template with animated page transitions: links fetch the next page and swap only the main column, so the header, the mega menu and the light/dark theme you picked survive the navigation. Canonical: https://gsapvault.com/templates/multi-page-saas-template Live demo: https://gsapvault.com/demos/multi-page-saas-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | ScrollTrigger | | Techniques | page-transition, soft-navigation, mega-menu, theme-switch, scrub, count-up, focus-management, scroll-reveal, stagger, click-toggle, scrollspy, view-transitions, directional-transition | | Uses Lenis | Yes | ## Overview Vault Inc is a complete four-page website for a software product, built around the thing a one-page template cannot do: moving between pages. Home, Product, Pricing and Changelog are four real HTML files, and every link between them is a real href, but a click never reloads the browser. The next page is fetched, only the main column is replaced, and the header, the open menu, the scroll engine and the theme you chose carry straight across. The art direction is deliberately low-key. One pale eucalyptus ground, one near-black ink, one deep ink-blue accent used about once per screen, and hairlines instead of shadows. The home page opens on a hard tone seam: a full-bleed band crosses the headline so the same letterforms read dark above it and light below, and flipping the theme inverts the whole composition. Below that, scrolling sweeps a playhead across a batch of job runs, filling each bar and printing its duration as it lands. The chrome is the part most product sites get wrong and it is built properly here. The mega menu is one panel that reshapes: moving from Product to Resources tweens the panel to the measured size of the incoming columns while the old ones slide out in the direction of travel, and the whole thing is keyboard-routable rather than Tab-broken by DOM order. The theme toggle grows a disc of the incoming ground out of the button itself. On a phone, a drawer takes over with the same sections as accordions. Making it yours is mostly renaming: the fictional product is a background job runner, but nothing in the structure assumes that. Repaint six values in the token block, swap the copy, and add a page by copying one of the four files: the router picks it up with no configuration, because it works from ordinary links. ## Features - Animated page transitions between four real HTML pages, each destination arriving with its own entrance rather than one shared fade: only
is swapped, so the header, menu, theme and Lenis instance persist across the navigation - A real light and dark theme, applied synchronously in so the page never paints in the wrong one, defaulting to the visitor's system preference and remembered in localStorage - A theme toggle built on the View Transitions API: the new theme is clipped open as a disc growing from the button, so the text and rules change under the moving edge, with an opaque-disc fallback where the API is missing - A mega menu that reshapes rather than reopening: the panel tweens to the measured box of the incoming columns while the outgoing ones slide out in the direction of travel - Full keyboard routing for the mega menu, which is Tab-broken by DOM order otherwise, plus Escape handling and a focus-out close - A mobile drawer with focus trapping, staggered rows and the mega menu's sections as animated accordions - A scroll-scrubbed run lane: a playhead sweeps the batch, each bar fills as it is crossed, durations print when they land, and the completed counter climbs - A hero built on one hard tone seam, with the headline painted in two layers so it reads dark above the band and light below it, and inverts completely with the theme - Every page works with JavaScript disabled and with the GSAP CDN blocked: links are real hrefs, the menus fall back to plain DOM, and the router simply never engages - Focus is moved to the new page and its title announced in a live region after every soft navigation ## Use Cases - Any software product that needs more than a landing page: a home page, a feature page, pricing and a changelog - Developer tools, APIs and infrastructure products where the buyer expects a docs-shaped site with a dark mode - Agencies and freelancers who want a multi-page chassis with the navigation and transitions already solved - Startups replacing a one-page site that has outgrown itself, without moving to a framework - Any site where a light and dark theme is a requirement rather than a nice-to-have ## Questions about this template ### Do the animated page transitions work on ordinary web hosting? Yes, on any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages or plain shared hosting. The one thing they need is to be served over http or https rather than opened straight off your hard drive, because each page is quietly fetched in the background before it swaps in. Opened from a file, the links just navigate the normal way and nothing is broken. ### How do I add a fifth page? Copy any of the four files, change the content inside
, and add a link to it in the header and footer. The router works from ordinary links rather than a route table, so it picks the new page up with no registration step. Keep the header and footer markup identical across pages so the chrome stays in sync. ### Does the light and dark switch actually stay switched? Yes. The choice is saved in the browser and applied by a script in the page head before anything is drawn, so a returning visitor never sees a flash of the wrong theme. Someone arriving for the first time gets whichever their operating system is set to. ### Can customers sign up or pay through it? No. This is a front-end template with no backend: the Start free and Talk to us buttons are links, and there is no signup form, no account area and no payment flow. Point the buttons at your real signup page, or at a Stripe payment link, and the site is doing its job. ### The fake product is a background job runner. How much work is it to make it something else? Mostly copy. Nothing in the layout assumes the vertical: the home page is a hero, a scrolling data section, three capability cells, a quote and a call to action, and the product page is four alternating feature blocks. Replace the words and the code samples, repaint six colour values, and it reads as your product. ### Will the mega menu work on a phone? The mega menu is desktop only, which is deliberate: a hover flyout is the wrong shape for a touch screen. Below 900px a drawer takes over and the same sections appear as tap-to-open accordions. On a touch laptop, the first tap on a nav item opens its panel and a second tap follows the link. ### What happens if someone's browser blocks the animation library? The site keeps working. The links are real, so navigation falls back to ordinary page loads, the menus still open, the theme still switches, and the content that would have faded in is simply already visible. You lose the motion and nothing else. ### Is it accessible? It is built to be. Colour pairs are measured against WCAG AA at the sizes they are used in both themes, the menus are keyboard operable with focus trapped in the drawer, focus moves to the new page after a transition and its title is announced, and everything animated has a designed still state under reduced motion. ## Vibe-Code Ready Setup This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### Two layers, one script The page is split into chrome and page. The chrome (header, mega menu, drawer, theme toggle, router and Lenis) is built once when the site first loads and is never torn down. Everything inside
lives in its own gsap.context, which is reverted and rebuilt on each navigation so ScrollTriggers from the page you left cannot leak into the one you arrived on. ### The page transition A click on a same-origin link is intercepted, the target is fetched, and the outgoing column slides out in the direction of travel while the request is in flight. When both finish, the new page's
content, title and description replace the current ones and the URL is updated with pushState. The incoming page then plays its own entrance: the home page wipes its tone seam up into place, the product page brings features in from the side each one sits on, the pricing page deals its plans left to right, and the changelog slides entries in with their oversized version numerals following. ### The mega menu One panel serves every nav section. Opening measures the incoming panel's box, tweens the container to it, and slides the outgoing columns out in the direction of travel while the new ones arrive with it. Because a shared flyout sits after every trigger in the DOM, Tab would otherwise skip past the panel that just opened, so arrow, Escape and focus-out handling route it by hand. ### The theme switch The stored choice is applied by a synchronous script in , before first paint, so the page never flashes the wrong theme. Changing it uses the View Transitions API: the browser freezes the outgoing frame, the theme is applied, and the new frame is clipped open as a disc growing from the toggle itself, so text, rules and the hero seam all change as the edge passes over them rather than after it. Where the API is unavailable it falls back to growing an opaque disc of the incoming ground colour, read live from the stylesheet. ### Without JavaScript Every navigation link is a real href, including the mega menu triggers, so the site is an ordinary four-page website when the router never runs. The menus close as display:none rather than hidden layers, so nothing is present but unreachable. If the GSAP CDN is blocked the script removes the class gating the reveal animations and leaves a complete, readable document. Under reduced motion the transitions become instant swaps and the run lane renders as a finished batch. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start No build step, no framework, no configuration. Open `index.html`. To deploy, upload the whole folder to any static host (Netlify, Vercel, Cloudflare Pages, GitHub Pages, or plain shared hosting). The page transitions need the pages to be served over `http://` or `https://` rather than opened from `file://`, because they are fetched: everything else works either way, and from `file://` the links simply navigate normally. ``` index.html Home: the seam hero, the run lane, capabilities, a quote product.html Four feature blocks and a sticky "on this page" rail pricing.html Three plans, a comparison table, an FAQ accordion changelog.html Dated release entries assets/style.css Every style, both themes, in one file assets/script.js Every behaviour, in one file ``` ### Accessibility - Colour pairs meet WCAG AA at the sizes they are used, in both themes. - The mega menu is keyboard operable: focus a trigger to open its panel, Down to enter it, Escape to close and return focus to the trigger. Focus landing anywhere else closes it. A shared flyout sits after every trigger in the DOM, so this is routed by hand rather than left to Tab order. - The drawer traps focus while open and returns it to the button on close. - After a page transition, focus moves to the new `
` and its title is announced in a live region. - Under `prefers-reduced-motion` the transitions become instant swaps, the run lane renders as a finished batch, and the theme change is an immediate repaint. Nothing is hidden and nothing needs an animation to be reached. - Every nav link is a real `href`, so the site is an ordinary four-page website with JavaScript disabled. ### Dependencies GSAP 3.12+ with ScrollTrigger, and Lenis (optional). Both load from a CDN; the tags are at the bottom of each page. Built and tested against GSAP 3.15.0. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Multi-Page SaaS Template](https://gsapvault.com/templates/multi-page-saas-template) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt