# 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.

Canonical: https://gsapvault.com/templates/architecture-studio-template
Live demo: https://gsapvault.com/demos/architecture-studio-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | svg-line-draw, scrub, pinning, scroll-reveal, hover-effect, count-up, parallax |
| Uses Lenis | Yes |

## Overview

A production-ready one-page site for architecture practices, engineers, and design studios, art-directed as a drawing office: cool concrete grey, ink, one drafting orange, and an expanded grotesk set in caps. The signature moment is a pinned hero where an SVG building elevation sketches itself line by line as you scroll, then crossfades into the photograph of the finished building with the linework settling over the top. Below it, a project index table swaps a fixed preview photograph as you hover or tab through the rows, stats count up, and a featured project drifts with soft parallax. Uses the stroke-dashoffset technique, so no DrawSVG plugin is needed. Swap the placeholder copy, drawing, and photography for your own and deploy anywhere as static files.

## Features

- Complete deployable one-page site: nav, blueprint hero, practice statement, project index, featured project, people, journal, and contact sections
- Pinned scroll-scrubbed blueprint hero: the elevation draws stroke by stroke, then crossfades into the finished photograph
- No DrawSVG plugin required: shapes are auto-measured with getTotalLength() and drawn with stroke-dashoffset
- Project index table where hovering or focusing a row crossfades a fixed preview image beside it
- Count-up practice stats with suffix support
- Soft parallax drift on the featured project photograph
- Bundled placeholder photography as optimised WebP files with the cool slate grade baked in, plus solid colour fallbacks
- Lenis smooth scrolling wired in and fully optional
- Accessible: reduced motion and no-JS both get the complete static page with the drawing finished and photo visible

## Use Cases

- Architecture and landscape practice websites
- Structural and civil engineering studio sites
- Interior design and conservation specialist portfolios
- Property developer and design-and-build one-pagers
- Any studio whose work deserves a drawing-office aesthetic

## How It Works

One script initialises each section inside a single gsap.context with gsap.matchMedia. The hero pins with ScrollTrigger and scrubs a timeline that draws every SVG shape using the classic stroke-dasharray and stroke-dashoffset technique, with each stroke's duration proportional to its measured getTotalLength() so pen speed feels constant; the finished photograph then fades in beneath the linework on the same timeline. The project index stores one handler per row in a Map, mirrors mouseenter with focus, and crossfades absolutely stacked preview images with autoAlpha. Stats animate a proxy object with snapped values, and the featured photograph scrubs yPercent between triggers. A prefers-reduced-motion branch renders the whole page static with the drawing complete and all values final.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Open `index.html` in a browser.** The template is fully self-contained; GSAP, ScrollTrigger, and Lenis load from CDN, and all photography is bundled locally in `assets/img/`. It works offline apart from the fonts and GSAP scripts.

**2. Make it yours:**

- Replace the text content in `index.html` (practice name, projects, people, contact details)
- Swap the blueprint drawing: the hero SVG (`.bp-svg`) is a hand-drawn elevation made of plain `line`, `rect`, and `circle` elements. Replace it with your own building drawn in the same `viewBox` (or export simplified linework from CAD as SVG strokes). Any `path`, `line`, `polyline`, `polygon`, `circle`, `ellipse`, or `rect` inside it is measured and drawn automatically
- Swap the photography (see below)
- Change the palette by editing the custom properties at the top of `assets/style.css`: `--drafting` (the orange), `--concrete`, `--ink`

**3. Deploy.** Static files, no build step. Any host works: Netlify, Vercel, GitHub Pages, or a plain server. For production, swap `script.js` for `script.min.js` in `index.html`.

### Accessibility

- **Reduced motion**: `prefers-reduced-motion: reduce` renders the entire page static, with the elevation fully drawn, the photograph visible beneath it, and stats at final values. The index preview still swaps, just without the tween
- **No JavaScript**: the page renders complete, with the finished drawing over the photograph; initial hidden states only apply once the script adds `.mf-ready` to the root element
- **Keyboard navigation**: focus mirrors hover on nav links, index rows, and journal rows; tabbing through the project index swaps the preview exactly like the mouse
- **Semantic HTML**: nav/main/section/article/footer landmarks, definition lists for stats and facts, real `<a>` elements for all interactions
- **Screen readers**: the preview panel duplicates row information and is `aria-hidden`; the drawing SVG is decorative and hidden

### Dependencies

**Required:**
- GSAP 3.12+
- ScrollTrigger plugin

**Optional:**
- Lenis (smooth scroll, included by default)

No DrawSVG or other Club plugins; the line draw uses the stroke-dasharray / stroke-dashoffset technique with `getTotalLength()`.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/script.min.js`: minified production build
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 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 Architecture Studio Template](https://gsapvault.com/templates/architecture-studio-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](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