# Service Pathway

> A photographic service chooser that keeps three client situations, the active offer, practical fit and a clear next step together in one confident studio section.

Canonical: https://gsapvault.com/sections/service-pathway-section
Live demo: https://gsapvault.com/demos/service-pathway-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | accessible-tabs, state-transition, progressive-enhancement, interruptible-transitions, keyboard-navigation, container-queries, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Service Pathway Section helps a visitor recognise which studio engagement fits their current product situation. A compact three-choice rail sits beside the selected service, its audience, expected outcome, optional scope and specific next step. A large documentary photograph makes the work tangible without pushing the decision below the fold. The fictional Northline Works example covers a new launch, a live-product reset and an embedded senior team.

At laptop width, the choices, active offer and action remain in one composed view. On phones all three choices stay adjacent to the result, followed by the active story and a purposeful wide photo crop. Each service has plain-language copy and its own local, replaceable photograph with per-panel focal-position controls.

When scripts are unavailable, the route links point to three complete service articles in a readable stack. With enhancement, the same content becomes an accessible tabbed comparison with fast, interruptible photo and copy transitions. Reduced motion changes state instantly, while independent instances and per-instance teardown keep the section safe inside a larger page.

## Features

- Three complete engagements with client fit, duration, outcome, native scope disclosure and a specific CTA
- Compact situation-led selector with all three choices visible beside the changing content
- Three coherent generated documentary photographs with local WebP files and per-panel crop controls
- Accessible enhanced tabs with roving tabindex plus Arrow, Home and End key support
- One shared route marker and interruptible photo and copy transitions that settle on the last selection
- Native contact dialog with focus return, Escape close and mail-link fallback
- Polite live announcement of the selected route and typical duration
- Complete stacked comparison and native scope disclosures without JavaScript
- Instant reduced-motion state changes, visible focus and native touch operation
- Root-scoped tokens, container queries, independent instances and per-instance teardown

## Use Cases

- Digital product studios comparing launch, optimisation and embedded-team engagements
- Creative agencies routing brand, campaign and retained-partner enquiries
- Consultancies distinguishing discovery, transformation and fractional leadership offers
- Architecture practices guiding new-build, renovation and workplace clients

## 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 begins as three complete service articles with matching route links, local photographs, decision facts, native scope disclosures and mail-link calls to action. That complete reading order remains available when JavaScript or GSAP is unavailable.

With GSAP present, each section becomes its own accessible tabbed comparison. Choosing a client situation updates the visible service, moves the selection signal and brings in the related story and photograph. Repeated or reversed choices interrupt the current transition and settle on the latest request. Arrow keys, Home and End move through the choices, and a polite status message confirms the selected offer and duration. The service action opens a native contact dialog with a clear sample contact, native Escape behaviour and focus return.

Reduced-motion preferences switch every state instantly, including when the preference changes while the section is mounted. Multiple sections can run independently, and the instance API can select a service or restore the original full comparison during teardown.

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

Load the stylesheet in your `<head>`:

_Code snippet omitted: it ships with the download._

Copy the complete `[data-service-pathway]` section marked in `index.html` and
the `assets/img/` directory. Then load GSAP and the section script before
`</body>`:

_Code snippet omitted: it ships with the download._

The inline `html, body` styles in `index.html` are preview furniture outside the
extractable section. There is no buyer build step.

### Make It Yours

Edit the studio name, heading and introduction directly in the section. Each
service has one matching selector link and article. Update its title, client
fit, outcome, scope, CTA, `data-label` and `data-duration` in the ordinary
HTML. Replace every reserved `hello@northline.example` address with your real
studio contact before publishing. The CTA `mailto:` remains a useful no-JavaScript
fallback; with JavaScript it opens the section's native contact dialog.

The three photographs are ordinary local images:

| Service | Shipped file | Recommended replacement | Alt text and crop |
| --- | --- | --- | --- |
| Launch | `assets/img/launch-team.webp` | 1536×1024 or another 3:2 landscape | Edit the adjacent `alt`; current focus is `50% 48%` |
| Product reset | `assets/img/improve-team.webp` | 1536×1024 or another 3:2 landscape | Edit the adjacent `alt`; current focus is `57% 45%` |
| Embedded team | `assets/img/embed-team.webp` | 1536×1024 or another 3:2 landscape | Edit the adjacent `alt`; current focus is `52% 48%` |

To use a different photo, replace the file or edit the `<img src>`, `width`,
`height` and `alt` beside that service. Set its focal point on the surrounding
figure:

_Code snippet omitted: it ships with the download._

The frame uses `object-fit: cover`. Wider or portrait sources are safe when the
focal point is set deliberately; check both the desktop landscape frame and the
wide mobile crop. The animation belongs to the frame and image element, so a
replacement needs no timeline change or generated artwork.

All brand controls are together on `.spw` at the top of `assets/style.css`:

_Code snippet omitted: it ships with the download._

Update the `--spw-ink-rgb` and `--spw-paper-rgb` companions when those solid
colours change; rules and dimmed text use them. The accent is reserved for
selection, focus and small signals. Recheck text and focus contrast after a
rebrand.

To add, remove or reorder an engagement, change one `[data-pathway-tab]` link
and its matching `[data-pathway-panel]` article in the same position. The
controller derives the count and relationships from those elements; there is
no duplicated JavaScript list or fixed three-item count. A single service is
valid, although a static section is usually simpler for that case.

### Behaviour and Options

Set the transition time in seconds on the root:

_Code snippet omitted: it ships with the download._

Use `0` for instant changes. Remove the attribute to use `--spw-duration` from
the root styles.

Every root exposes an independent API:

_Code snippet omitted: it ships with the download._

For content inserted later, use `window.ServicePathway.mount(root)` or
`mountAll(container)`. `destroyAll(container)` tears down only the instances in
that subtree. Repeated input interrupts the active transition and settles on the
last requested service.

The native contact dialog contains a sample enquiry prompt, a mail link and a
close button. Edit that markup inside `[data-pathway-dialog]`; it intentionally
does not submit a form or imply that an enquiry was sent. Browsers without
`HTMLDialogElement.showModal()` follow the CTA's `mailto:` link instead.

### Accessibility and Integration

- The example uses `h2` for the section and `h3` for services. Change those
  levels to fit the host document; the styles do not depend on heading tags.
- With enhancement, links become an accessible tab list with unique IDs and
  roving focus. Arrow keys select adjacent services; Home and End select the
  first and last. Enter and Space activate the focused choice.
- Mouse and touch use native link activation. Focus rings remain visible on the
  dark chooser and light service panel.
- The enhanced CTA opens a native modal dialog. Focus moves to its close button,
  stays inside the modal, returns to the invoking CTA on close, and Escape uses
  the browser's native close behaviour.
- The live region announces the selected service and typical duration without
  repeating the whole article.
- Reduced motion keeps every choice operable and changes state instantly,
  including when the preference changes while mounted.
- If JavaScript or GSAP is unavailable, the chooser remains a set of hash links,
  all complete service articles appear in a readable stack and each CTA uses its
  reserved example `mailto:` destination. Native scope disclosures still work.
- The section has natural height, uses container queries, installs no smooth
  scrolling and does not intercept the host page's wheel, touch or navigation.
  It recomposes for a narrow host column as well as a narrow viewport.
- Teardown removes only listeners, animations, generated accessibility IDs and
  inline state owned by that section, then restores the authored fallback.

### Dependencies and Credits

- GSAP 3.12+ core only; the demo pins GSAP 3.15.0.
- No GSAP plugins, Lenis, remote fonts or third-party UI assets.
- The three demo photographs were created with OpenAI's built-in image
  generation tool for this fictional example. Source prompts and compressed
  authoring masters are included in the source project; buyers receive the
  optimised local WebP files.
- Northline Works and its engagements are sample content. Replace the claims and
  calls to action with information you can substantiate 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