# Process Path

> A how-we-work section where scrolling draws a path around an elliptical photo window, and each stage's photograph opens out of the point the path has just reached.

Canonical: https://gsapvault.com/sections/process-path-section
Live demo: https://gsapvault.com/demos/process-path-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scroll-scrub, svg-path-draw, clip-path-reveal, sticky-scroll-story, progressive-enhancement, keyboard-navigation, container-queries, responsive-section |
| Uses Lenis | No |

## Overview

Process Path Section explains how working with a business goes, one stage at a time, and what the client gets at each stage. A large elliptical photo window sits on a dark ground made from a blurred copy of the same photograph. Around its rim a path runs through one stop per stage, each labelled with its timing and name. As visitors scroll, the path draws on to the next stop and the next stage's photograph opens out of that point in a widening circle, while the ground, the stage copy and its list of deliverables change with it.

The fictional Marram Garden Studio example takes a back garden from a first walk-round through survey, design and build to a year of aftercare, with five generated photographs of the same garden changing over time. The stops are buttons, so visitors can jump straight to any stage.

The stages are an ordinary ordered list. Without JavaScript, with reduced motion or in a narrow column, the same markup reads as a numbered list with a rail, a photograph and the deliverables for every stage.

## Features

- Scroll-scrubbed path around an elliptical photo window with one stop per stage, derived from the markup
- Each stage's photograph opens as a circle from the stop the path has just reached, with a counter-scaling image
- Blurred photographic ground that crossfades with each stage
- Stage copy with timing, title, description and a You get list of deliverables for every stage
- Stop buttons with timing and stage labels that jump to any stage by pointer, touch or keyboard
- Sticky frame within the section itself: no pinning spacers, no smooth scroller and no change to the host's scroll
- Readable ordered-list fallback with a numbered rail for no JavaScript, reduced motion and narrow hosts
- Rail progress on phones that fills as each stage is reached
- Five generated photographs of one garden changing through the process, each an ordinary replaceable image
- Independent instances, unique IDs and exact teardown

## Use Cases

- Garden designers, architects and builders explaining a project from first visit to handover
- Studios and agencies showing how an engagement runs and what each phase delivers
- Clinics and practices walking new clients through a course of treatment
- Makers and commissioned services setting expectations on timing

## Vibe-Code Ready Setup

This website section 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

The section starts as a complete ordered list: every stage has its photograph, timing, title, description and deliverables in the markup. On wide screens with motion allowed, the script turns the list into a sticky frame inside a taller track. Scroll progress through the track drives one GSAP timeline. The path is sampled from the window's ellipse so its stops sit exactly on the drawn line, and its drawn length follows the timeline as the scroll moves between stages.

At each stage change the outgoing copy lifts away, the path moves on to the next stop, the next photograph opens as a clip-path circle centred on that stop while it settles from a slight zoom, and the blurred ground crossfades. Because every change is scrubbed from scroll position, reversing mid-change plays it back exactly, and the smoothed scrub keeps fast wheel input from jumping.

The section never pins the page or installs a scroller: the frame is CSS sticky inside its own track and the host keeps its scroll. Clicking a stop scrolls the page to that stage. In narrow columns, on phones and with reduced motion, the section keeps its list layout, and with motion a rail fills as stages are reached. Changing the reduced-motion preference or resizing across the breakpoint switches modes cleanly, and teardown restores the original markup.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Copy these into your project:

- the `<section class="ppr">` element from `index.html`, between the `EXTRACT START` and `EXTRACT END` comments
- `assets/style.css`
- `assets/script.js`
- `assets/img/` (or your own photographs)

Load the fonts, GSAP and ScrollTrigger, then the section script, after the markup:

_Code snippet omitted: it ships with the download._

Everything outside the `<section>` in `index.html` (the page background and body margin) is demo furniture. No build step is needed.

### Make it yours

#### Stages

Each stage is one `<li data-ppr-step>` inside `<ol data-ppr-steps>`. To add a stage, copy a whole `<li>` and edit it; to remove or reorder stages, delete or move whole `<li>` elements. The number of stops, their positions on the path, the counter and the animation all follow the markup. Two to seven stages fit comfortably around the window; with one stage the section shows as a single list item.

Inside each stage:

| What | Where |
| --- | --- |
| Stop label | `data-ppr-label` on the `<li>` (keep it to two or three words) |
| Timing | `<p class="ppr-step__when" data-ppr-when>`: shown above the title and on the stop |
| Title | `<h3 class="ppr-step__title">` |
| Description | `<p class="ppr-step__body">` |
| Deliverables | the `<ul>` inside `.ppr-step__gets`, one `<li>` each |

Keep `data-ppr-part` on the timing, title, description and deliverables blocks: those are the pieces that change in turn.

The heading and introduction are in `.ppr__intro`. Use `<h2>` in most pages. On wide screens the introduction sits beside the photo window, so keep the heading to a short line or two. The studio name and the top link are in `.ppr__bar`. The closing call to action is `.ppr__close`: replace the example `mailto:` address, the phone number and the price, which are fictional.

#### Photographs

Each stage has one photograph:

_Code snippet omitted: it ships with the download._

To replace one, point `src` at your own photo, set its real `width` and `height`, and write new `alt` text. Landscape photos around 3:2 at 1500 px or more wide work best; the window is an ellipse, so keep the subject inside the middle two thirds. Move the focal point with `--ppr-focus` (horizontal then vertical, as percentages). The blurred background is made from the same image automatically. Keep `loading="eager"` on the first stage's photo and `loading="lazy"` on the rest. No image editing, SVG work or animation changes are needed.

| File | Stage |
| --- | --- |
| `assets/img/visit.webp` | Garden visit |
| `assets/img/survey.webp` | Survey and concept |
| `assets/img/design.webp` | Detailed design |
| `assets/img/build.webp` | Build and planting |
| `assets/img/aftercare.webp` | First year |

#### Brand variables

All brand controls are custom properties on `.ppr` at the top of `style.css`:

| Variable | Controls |
| --- | --- |
| `--ppr-ground`, `--ppr-ground-veil` | Dark ground and the veil over the blurred photo |
| `--ppr-ink`, `--ppr-ink-soft`, `--ppr-line` | Text, secondary text and rules |
| `--ppr-accent`, `--ppr-accent-ink` | Timing labels, current stop and the button |
| `--ppr-font-serif`, `--ppr-font-sans` | Display and body faces |
| `--ppr-gutter`, `--ppr-max` | Edge spacing and maximum width of the list layout |
| `--ppr-win-left`, `--ppr-win-right`, `--ppr-win-top`, `--ppr-win-bottom` | Where the elliptical window sits in the frame |

A quick rebrand for a light-on-dark architecture practice:

_Code snippet omitted: it ships with the download._

The text sits on a dark veil, so keep `--ppr-ground-veil` dark enough for your ink colour when you change it.

### Behaviour and options

Set these on the `<section>`:

| Attribute | Default | Effect |
| --- | --- | --- |
| `data-scrub` | `0.6` | Seconds the animation takes to catch up with the scroll. `0` follows the scroll exactly |
| `data-step-length` | `90` | Scroll distance per stage, in viewport heights (percent) |
| `data-stage-min-width` | `1000` | Narrowest section width, in pixels, that uses the scroll path |
| `data-stage-min-height` | `560` | Shortest viewport, in pixels, that uses the scroll path |
| `data-stops-label` | `Stages` | Accessible name of the stop navigation |

The script mounts every `[data-process-path]` on load. For content added later, or to remove the section:

_Code snippet omitted: it ships with the download._

Destroy before changing the stage markup, then mount again. Teardown only touches this instance.

### Accessibility and integration

- The stages are a real ordered list and every stage's text stays in the document. Screen readers read the whole process in order whatever the scroll position.
- The stops are buttons with the stage's timing and name. They work by pointer, touch and keyboard, show a visible focus ring and mark the current stage with `aria-current="step"`. Choosing one scrolls the page to that stage.
- **Scroll:** the frame is CSS `position: sticky` inside the section's own taller track. The section does not pin the page, add spacers outside itself, install a smooth scroller or change the host's scroll. It needs to be a full-width block that is not inside an element with `overflow: hidden` or `overflow: auto`, or sticky positioning stops working.
- **Narrow columns and phones:** below `data-stage-min-width` (measured on the section, not the window) or a short viewport, the section stays a numbered list with a rail that fills as stages are reached.
- **Reduced motion and no JavaScript:** the list layout with every photograph and deliverable, no scroll animation. Changing the motion preference while the page is open switches cleanly.
- If GSAP or ScrollTrigger fail to load, the list layout remains.

### Dependencies and credits

- [GSAP 3.15.0](https://gsap.com) and ScrollTrigger from jsDelivr, under the [GSAP standard licence](https://gsap.com/standard-license/).
- [Albert Sans](https://fonts.google.com/specimen/Albert+Sans) and [Newsreader](https://fonts.google.com/specimen/Newsreader) from Google Fonts, under the SIL Open Font License.
- The five photographs are generated concept images of a fictional garden and people, made for this section. They are not a real client project. Marram Garden Studio, its prices, contact details and promises are sample content: replace them with your own before publishing.

## 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 website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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