Process Path

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 and ScrollTrigger from jsDelivr, under the GSAP standard licence.
• Albert Sans and 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.