# Business Website Templates

> Animated website templates for service businesses: studios, salons, gyms, agencies and practices. Complete sites with booking flows and real tools built in.

Canonical: https://gsapvault.com/templates/category/business-services

Complete sites for practices and service businesses that sell expertise, sessions or projects. Each one is built around a working tool rather than a contact form and a hope.

## Templates that do a job, not just look like one

A service business site has to answer a specific question before anyone gets in touch. What will this cost? When can I come in? What does the result actually look like? Most templates answer none of those and push the visitor at a contact form instead, which is where the enquiry quietly dies.

The templates in this group each answer their question with something the visitor can operate. A barber shop has a three-step booking flow with a running summary. A gym has a one-rep-max calculator that prescribes twelve weeks of training and draws the plates to load. An interior design studio has a before and after slider. A financial planner has a draggable life-plan timeline that redraws the projection as you move retirement earlier or later. These are real interfaces, not screenshots of interfaces.

They also refuse their category defaults on purpose, which is worth more than it sounds. Nail studios are not pink here, barber shops have no poles or crossed razors, and the wellness studio commits to a saturated clay rather than the beige and sage the whole sector uses. A site that does not look like its competitors is doing half the marketing on its own.

Almost every one re-points to a neighbouring business with a copy pass. The nail studio suits anything sold as a colour or a finish, including paint, tile and framing. The barber shop suits any appointment business where the customer picks a person. Read the use-case notes on each template before deciding your vertical is missing.

## How to adapt a business template to your trade

The structure carries over between related businesses more often than people expect. Work in this order and you will know within an hour whether a template fits.

1. **Start from the interaction, not the industry:** Decide whether your case rests on a booking, a calculation, a comparison or a price list. Pick the template whose signature does that, even if it was written for a different trade.
2. **Rewrite the tool's data first:** The booking steps, service lists and calculator inputs are plain arrays or markup near the top of the script. Put your real services and prices in before you judge whether the page works.
3. **Then do the words and the palette:** Headings, about copy and the footer are ordinary HTML. Colours are CSS custom properties in one block, and several templates ship two or more complete palettes as a one-attribute swap.
4. **Check it on a phone:** These are the sites people open one-handed while deciding whether to book. Every template is built mobile-first and the layouts are tested there, but your copy lengths are not, so read it on a real device.

```css
<li class="service" data-price="3200" data-minutes="45">
  <h3>Skin fade</h3>
  <p>Clipper work through the sides, scissor finish on top.</p>
</li>
```

## Business & services at a Glance

| Template | What it does | Built with | Tone |
| --- | --- | --- | --- |
| [Architecture Studio Template](https://gsapvault.com/templates/architecture-studio-template) | A complete one-page site for an architecture practice: a scroll-scrubbed blueprint hero that draws a building elevation in orange linework and crossfades into the finished photograph, plus a project index with live preview swaps, count-up stats, and a parallax featured project. | ScrollTrigger | light |
| [Wellness Studio Template](https://gsapvault.com/templates/wellness-studio-template) | A complete one-page site for a yoga or movement studio, built on a saturated terracotta ground, with a full-week class timetable and an interactive 4-7-8 breath guide as its signature. | ScrollTrigger | light |
| [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 |
| [Barber Shop Template](https://gsapvault.com/templates/barber-shop-template) | A complete one-page site for a barber shop, built on an aubergine ground with heavy slab type, and a three-step booking flow with a running summary as its signature. | ScrollTrigger | dark |
| [Creative Portfolio Template](https://gsapvault.com/templates/creative-portfolio-template) | A complete one-page studio portfolio built from GSAP Vault effects: split-text hero, client logo marquee, stagger grid work section, pinned horizontal case studies, count-up stats, and magnetic buttons. | ScrollTrigger, SplitText | light |
| [Developer Portfolio Template](https://gsapvault.com/templates/developer-portfolio-template) | A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read. | ScrollTrigger | dark |
| [Photography Portfolio Template](https://gsapvault.com/templates/photography-portfolio-template) | A complete one-page photographer's portfolio on a mid-tone gallery-wall ground, with a signature loupe: a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears. | ScrollTrigger | mixed |
| [Nail Studio Template](https://gsapvault.com/templates/nail-studio-template) | A complete one-page site for a boutique nail studio, built on a butter ground with one lacquer red, and a live shade try-on that paints a photographed hand coat by coat as its signature. | ScrollTrigger | light |
| [Holiday Let Template](https://gsapvault.com/templates/holiday-let-template) | A complete one-page site for a single holiday cottage or cabin, built around a draggable date-range availability calendar that refuses to span nights already taken and prices every night on its own season. | ScrollTrigger | mixed |
| [Strength Gym Template](https://gsapvault.com/templates/strength-gym-template) | A complete one-page site for a barbell club or strength gym, built around a one-rep-max calculator that prescribes every week of a twelve-week block and draws the plates you actually have to load. | ScrollTrigger, Draggable | dark |
| [Tattoo Studio Template](https://gsapvault.com/templates/tattoo-studio-template) | A complete one-page site for a tattoo studio, built around a flash-sheet picker: choose a design off the sheet and watch its linework ink itself stroke by stroke with DrawSVG, black lines first, red packed in last. | ScrollTrigger, DrawSVG | dark |
| [Online Course Template](https://gsapvault.com/templates/online-course-template) | A complete one-page site for selling a single online course, built around a draggable pace planner: set your hours per week and watch the curriculum re-pack itself into real weeks with a live finish date. | ScrollTrigger, Draggable | mixed |
| [Interior Design Studio Template](https://gsapvault.com/templates/interior-design-studio-template) | A complete one-page site for a boutique interior design studio on a warm greige ground, with a draggable before/after slider that wipes a redesigned room over the bare original as its signature. | ScrollTrigger | light |
| [Financial Planner Template](https://gsapvault.com/templates/financial-planner-template) | A complete one-page site for an independent financial planner, centred on a draggable life-plan timeline that redraws an illustrative projection and updates the planning conversation live. | ScrollTrigger, Draggable | mixed |
| [Recruitment Agency Template](https://gsapvault.com/templates/recruitment-agency-template) | A complete one-page recruitment agency template for specialist hiring studios, pairing candid editorial art direction with a kinetic talent-network hero, live Flip-powered role matching, a scroll-drawn three-step method, candidate stories, and a full employer brief dialog. | ScrollTrigger, Flip | light |
| [Editorial One Page Template](https://gsapvault.com/templates/editorial-one-page-template) | A vertical-agnostic editorial one-pager whose cover exists twice: a chalk plate on top and an ink negative beneath it, revealed through a soft aperture that follows the cursor and stretches on the axis it is moving along. | ScrollTrigger, SplitText | light |
| [Long-Form Story Template](https://gsapvault.com/templates/long-form-story-template) | A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins. | ScrollTrigger | light |
| [Web Design Agency Template](https://gsapvault.com/templates/web-design-agency-template) | A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing. | ScrollTrigger, SplitText, DrawSVG, Flip | light |
| [Branding Studio Template](https://gsapvault.com/templates/branding-studio-template) | An editorial one-page site for a brand and identity studio: a contents index of typographic plates you throw sideways with a finger, display headings cut in a variable serif that arrive light and set themselves once as they come into view, and a featured project laid out as a proper article with a drop cap, marginalia and numbered notes. | ScrollTrigger, Draggable, InertiaPlugin, CustomEase | light |
| [Advertising Agency Template](https://gsapvault.com/templates/advertising-agency-template) | A one-page site for a full-service ad agency, opening on a hero whose background is a pinned, scroll-scrubbed reel of location photography, before a capabilities marquee that skews in proportion to how fast the visitor is scrolling right now, tracked live with the GSAP Observer plugin. | ScrollTrigger, SplitText, Observer, CustomEase | dark |
| [Record Label Template](https://gsapvault.com/templates/record-label-template) | A complete independent record label site on a saturated magenta ground, with a rack of designed vinyl sleeves whose records slide out and become genuinely drag-spinnable turntables with inertia, motion smear and an elastic settle. | ScrollTrigger, Draggable, InertiaPlugin | dark |

## Templates in This Category

### Architecture Studio Template

A complete one-page site for an architecture practice: a scroll-scrubbed blueprint hero that draws a building elevation in orange linework and crossfades into the finished photograph, plus a project index with live preview swaps, count-up stats, and a parallax featured project.

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

### Wellness Studio Template

A complete one-page site for a yoga or movement studio, built on a saturated terracotta ground, with a full-week class timetable and an interactive 4-7-8 breath guide as its signature.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/wellness-studio-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/wellness-studio-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)

### Barber Shop Template

A complete one-page site for a barber shop, built on an aubergine ground with heavy slab type, and a three-step booking flow with a running summary as its signature.

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

### Creative Portfolio Template

A complete one-page studio portfolio built from GSAP Vault effects: split-text hero, client logo marquee, stagger grid work section, pinned horizontal case studies, count-up stats, and magnetic buttons.

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

### Developer Portfolio Template

A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read.

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

### Photography Portfolio Template

A complete one-page photographer's portfolio on a mid-tone gallery-wall ground, with a signature loupe: a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears.

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

### Nail Studio Template

A complete one-page site for a boutique nail studio, built on a butter ground with one lacquer red, and a live shade try-on that paints a photographed hand coat by coat as its signature.

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

### Holiday Let Template

A complete one-page site for a single holiday cottage or cabin, built around a draggable date-range availability calendar that refuses to span nights already taken and prices every night on its own season.

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

### Strength Gym Template

A complete one-page site for a barbell club or strength gym, built around a one-rep-max calculator that prescribes every week of a twelve-week block and draws the plates you actually have to load.

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

### Tattoo Studio Template

A complete one-page site for a tattoo studio, built around a flash-sheet picker: choose a design off the sheet and watch its linework ink itself stroke by stroke with DrawSVG, black lines first, red packed in last.

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

### Online Course Template

A complete one-page site for selling a single online course, built around a draggable pace planner: set your hours per week and watch the curriculum re-pack itself into real weeks with a live finish date.

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

### Interior Design Studio Template

A complete one-page site for a boutique interior design studio on a warm greige ground, with a draggable before/after slider that wipes a redesigned room over the bare original as its signature.

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

### Financial Planner Template

A complete one-page site for an independent financial planner, centred on a draggable life-plan timeline that redraws an illustrative projection and updates the planning conversation live.

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

### Recruitment Agency Template

A complete one-page recruitment agency template for specialist hiring studios, pairing candid editorial art direction with a kinetic talent-network hero, live Flip-powered role matching, a scroll-drawn three-step method, candidate stories, and a full employer brief dialog.

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

### Editorial One Page Template

A vertical-agnostic editorial one-pager whose cover exists twice: a chalk plate on top and an ink negative beneath it, revealed through a soft aperture that follows the cursor and stretches on the axis it is moving along.

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

### Long-Form Story Template

A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/long-form-story-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/long-form-story-template.md)

### Web Design Agency Template

A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing. Services lead with plain price bands and timelines, and the whole page is keyed to one brand colour you swap.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/web-design-agency-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/web-design-agency-template.md)

### Branding Studio Template

An editorial one-page site for a brand and identity studio: a contents index of typographic plates you throw sideways with a finger, display headings cut in a variable serif that arrive light and set themselves once as they come into view, and a featured project laid out as a proper article with a drop cap, marginalia and numbered notes. Four measured palettes ship.

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

### Advertising Agency Template

A one-page site for a full-service ad agency, opening on a hero whose background is a pinned, scroll-scrubbed reel of location photography, before a capabilities marquee that skews in proportion to how fast the visitor is scrolling right now, tracked live with the GSAP Observer plugin. Six real campaign case studies with results stats, a CSS-only discipline filter, and an honest process rail sit either side of it.

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

### Record Label Template

A complete independent record label site on a saturated magenta ground, with a rack of designed vinyl sleeves whose records slide out and become genuinely drag-spinnable turntables with inertia, motion smear and an elastic settle.

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

## Related Guides

- [54 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) ([Markdown](https://gsapvault.com/blog/interactive-website-templates.md)): 54 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.
- [Animation for Content Editors](https://gsapvault.com/blog/animation-for-content-editors) ([Markdown](https://gsapvault.com/blog/animation-for-content-editors.md)): You manage the website content, but animations feel like a black box. Learn the vocabulary, know what's possible, and talk to developers effectively.
- [GSAP performance: why animations get janky and how to fix it](https://gsapvault.com/blog/gsap-performance-guide) ([Markdown](https://gsapvault.com/blog/gsap-performance-guide.md)): A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

## Frequently Asked Questions

### Do the booking flows actually take bookings?

They are complete front ends with working state, validation and a summary, but they do not include a backend or a payment processor. Wire the submit handler to your booking system, an email endpoint, or a form service. The template gives you the part that is expensive to design and build.

### Can I use a template written for a different business?

Usually yes, and each template lists the trades it re-points to cleanly. What transfers is the structure and the signature interaction; what you replace is the copy, the photography and the palette. Choose by the interaction your business needs, not by the label on the demo.

### Are these templates good for local SEO?

They give you the technical side: semantic headings, fast static delivery, real text rather than text baked into images, and no framework overhead. You still need to add your own business schema, address details and Google Business Profile. The markup is plain enough to make that easy.

### What happens if a visitor has JavaScript disabled?

The page still works. Reveal animations are pre-hidden only under a class that JavaScript adds, so nothing is invisible without it, and interactive sections fall back to a readable static layout rather than an empty panel.

## Related Categories

- [Portfolio Website Templates](https://gsapvault.com/templates/category/portfolio-personal)
- [Events and Hospitality Templates](https://gsapvault.com/templates/category/events-hospitality)

---

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