# Page Transition Templates

> Multi-page website templates with animated page transitions: catalogue page turns, shared-element photo hand-offs and seamless swaps. Static HTML, no framework.

Canonical: https://gsapvault.com/templates/category/page-transitions

Multi-page sites where moving from one page to the next is part of the design. Every page is a real HTML file with its own address, and the navigation between them is animated rather than a white flash and a reload.

## Real pages, animated navigation

Smooth page transitions used to mean adopting a single-page framework, a router and a build step. These templates do it with plain HTML pages. Links stay ordinary links, each page has its own URL that can be bookmarked, shared and indexed, and a small shared script choreographs the move between pages: most of these fetch the next page and animate the swap, while the estate agency runs its hand-off across a full browser load.

Each template commits to a different kind of transition. The furniture showroom splits the screen at a spine and turns a three-dimensional catalogue leaf to reveal the next object, and turns it back when you return. The multi-page portfolio sweeps panels over the departing page and settles a photograph into the arriving one. The estate agency carries a listing photograph across a real navigation into the property hero with a GSAP Flip hand-off. The SaaS template keeps its header, mega menu and theme in place and swaps only the main column.

The parts that usually get skipped are done. Back and Forward move between real page addresses, focus moves to the arriving content for keyboard and screen reader users, modifier clicks and new tabs behave as the browser intends, and the shared styles and fonts stay loaded so there is never an unstyled frame between pages.

Each one fails safe. Reduced motion swaps pages without the animation, opening the files straight from disk or losing the animation library falls back to normal navigation, and with JavaScript switched off every page is still a complete, readable page.

## How to keep the transitions working as you customise

The transition is a shared layer over ordinary pages, so most edits are plain content edits. A few structural rules keep the hand-off intact.

1. **Serve it over HTTP while you edit:** Templates that fetch the next page need HTTP or HTTPS for it, so run any local static server. Opening the files directly still works, just with ordinary page loads.
2. **Keep shared assets shared:** Every page links the same stylesheet and script. Adding a page means copying an existing one so it carries the same head, wrapper markup and data attributes the transition reads.
3. **Put page behaviour in the shared script:** Where the next page is fetched, scripts inside it are not run on arrival. New interactions go in the shared initialisation, which tears down the outgoing page and sets up the incoming one on every navigation.
4. **Opt a link out when it should navigate normally:** A single data attribute on a link, documented in each template README, gives it plain browser navigation. External links, downloads and new-tab clicks already behave that way.

```css
<a href="cane-chair.html">Cane chair</a>
<a href="price-list.pdf" data-native-navigation>Price list</a>
```

## Page transitions at a Glance

| Template | What it does | Built with | Tone | Structure |
| --- | --- | --- | --- | --- |
| [Law Firm](https://gsapvault.com/templates/law-firm-template) | A fifteen-page law firm website template for solicitors, lawyers, accountants and consultancies. | ScrollTrigger | mixed | 15 pages |
| [Multi-Page Developer Portfolio](https://gsapvault.com/templates/multi-page-developer-portfolio-template) | An eleven-page portfolio website template for frontend developers, design engineers, product designers and freelance consultants. | ScrollTrigger | mixed | 11 pages |
| [Fitness Gym](https://gsapvault.com/templates/fitness-gym-template) | An eight-page gym website template for class-based gyms, functional fitness boxes, fitness-racing and boxing gyms. | Flip | mixed | 8 pages |
| [Pilates Studio](https://gsapvault.com/templates/pilates-studio-template) | A seven-page pilates studio website template for reformer, yoga, barre and dance studios and boutique fitness. | ScrollTrigger | light | 7 pages |
| [Construction Company](https://gsapvault.com/templates/construction-company-template) | An eight-page construction company website template for builders, contractors, property developers, engineering firms and consultancies. | ScrollTrigger, Flip | mixed | 8 pages |
| [Physiotherapy Clinic](https://gsapvault.com/templates/physiotherapy-clinic-template) | A seven-page clinic website template for physiotherapists, dental practices, chiropractors, osteopaths and massage clinics. | ScrollTrigger | light | 7 pages |
| [Furniture Showroom](https://gsapvault.com/templates/furniture-showroom-template) | A five-page furniture showroom website template for furniture makers, lighting studios, ceramic studios, product catalogues and independent design ateliers. | ScrollTrigger | mixed | 5 pages |
| [Multi-Page Portfolio](https://gsapvault.com/templates/multi-page-portfolio-template) | A seven-page portfolio website template for architecture studios, creative agencies, interior designers, landscape designers and photographers. | ScrollTrigger | light | 7 pages |
| [Real Estate Template](https://gsapvault.com/templates/real-estate-template) | A four-page estate agency site on a deep petrol ground, with a GSAP Flip shared-element transition that carries a listing photograph across a real page navigation into the property hero. | ScrollTrigger, Flip | dark | 4 pages |
| [Multi-Page SaaS Template](https://gsapvault.com/templates/multi-page-saas-template) | A four-page SaaS website template with animated page transitions and a real light/dark theme: links fetch the next page and swap only the main column, so the header, the mega menu and the theme survive every navigation. | ScrollTrigger | mixed | 4 pages |

## Templates in This Category

### Law Firm

A fifteen-page law firm website template for solicitors, lawyers, accountants and consultancies. Each page opens on one giant serif word cut through the middle by two flat colours, and every page change carries the next page's word in on a block of its colour.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/law-firm-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/law-firm-template.md)

### Multi-Page Developer Portfolio

An eleven-page portfolio website template for frontend developers, design engineers, product designers and freelance consultants. Every project has its own case study in its own colour, whole sections turn selected, and every page change runs as a text selection that lands on the next title in the destination's colour.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/multi-page-developer-portfolio-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/multi-page-developer-portfolio-template.md)

### Fitness Gym

An eight-page gym website template for class-based gyms, functional fitness boxes, fitness-racing and boxing gyms. A live LED countdown to the next class, a player that runs a whole class in 25 seconds, a filterable timetable and a sled-push page transition on every link.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/fitness-gym-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/fitness-gym-template.md)

### Pilates Studio

A seven-page pilates studio website template for reformer, yoga, barre and dance studios and boutique fitness. Classes are colour-coded by spring, a Choose your spring picker finds the right one, and every page change slides the site sideways against four coloured springs.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/pilates-studio-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/pilates-studio-template.md)

### Construction Company

An eight-page construction company website template for builders, contractors, property developers, engineering firms and consultancies. Four colour-coded sectors, a filterable project index, project pages with a draggable build timeline, and a page transition that builds each new page storey by storey.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/construction-company-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/construction-company-template.md)

### Physiotherapy Clinic

A seven-page clinic website template for physiotherapists, dental practices, chiropractors, osteopaths and massage clinics. An interactive body map leads to treatment pages, and every page change opens through a vermilion disc that grows from the point the visitor touched.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/physiotherapy-clinic-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/physiotherapy-clinic-template.md)

### Furniture Showroom

A five-page furniture showroom website template for furniture makers, lighting studios, ceramic studios, product catalogues and independent design ateliers. A bold catalogue cover leads to four dedicated object pages through a three-dimensional catalogue page turn.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/furniture-showroom-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/furniture-showroom-template.md)

### Multi-Page Portfolio

A seven-page portfolio website template for architecture studios, creative agencies, interior designers, landscape designers and photographers. Seamless animated page transitions connect its project browser, filterable work index, case studies and local enquiry draft.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/multi-page-portfolio-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/multi-page-portfolio-template.md)

### Real Estate Template

A four-page estate agency site on a deep petrol ground, with a GSAP Flip shared-element transition that carries a listing photograph across a real page navigation into the property hero.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/real-estate-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/real-estate-template.md)

### Multi-Page SaaS Template

A four-page SaaS website template with animated page transitions and a real light/dark theme: links fetch the next page and swap only the main column, so the header, the mega menu and the theme survive every navigation. Re-points to a developer tool, an API product, an analytics or fintech SaaS, an agency site, or any multi-page marketing site.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/multi-page-saas-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/multi-page-saas-template.md)

## Related Guides

- [84 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) ([Markdown](https://gsapvault.com/blog/interactive-website-templates.md)): 84 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.
- [124 GSAP animation examples and demos with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) ([Markdown](https://gsapvault.com/blog/gsap-animation-examples.md)): 124 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

## Frequently Asked Questions

### Are these single-page apps?

No. Each page is a separate HTML file with its own URL, title and description, so it can be linked to directly and indexed like any other page. The transition is an enhancement layered over those real pages.

### Do I need Barba.js, Swup or a framework?

No. The navigation layer is a small part of each template’s own script, built on GSAP, with nothing else to install. If you later move the design into a framework, the transition timelines port across.

### Do the browser Back and Forward buttons work?

Yes. History entries are real page addresses, so Back and Forward land on the right page, and focus moves to the arriving content for keyboard and screen reader users.

### What happens with reduced motion or without JavaScript?

With reduced motion the page swaps instantly without the animation. Without JavaScript, or when the files are opened directly from disk, links navigate normally and every page remains complete.

## Related Categories

- [Portfolio Website Templates](https://gsapvault.com/templates/category/portfolio-personal)
- [Commerce and Product Templates](https://gsapvault.com/templates/category/commerce-product)
- [Landing Page Templates](https://gsapvault.com/templates/category/landing-marketing)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt