Product Detail Tour

Quick Start

Keep assets/style.css, assets/script.js and assets/img/chair.webp together. Open index.html for the standalone example. There is no build step.

For an existing page, copy the complete <section data-product-detail-tour>…</section> from index.html, load the stylesheet, and load GSAP before the section script:

Code snippet omitted: it ships with the download.

The example's Manrope Google Fonts link belongs in your page's head if you keep that face. The body-margin rule in the example is preview setup; section CSS itself is scoped. The root heading is an h2; change its tag to suit your document hierarchy without changing its class.

Make it yours

Edit identity, heading and proposition in .pdt-header / .pdt-heading. Edit the CTA label and the semantic specification rows in [data-pdt-specifications]. The enhanced CTA targets the unique specification destination inside its own instance. Preserve a valid href and specification id for the no-JavaScript path; give these unique values when duplicating raw markup.

Feature content lives entirely in the [data-pdt-feature] articles. Each article's data-label becomes the visible control label; its heading and paragraphs become the annotation. Keep the concise label distinct from the longer explanation.

Replace the photograph

The single slot is assets/img/chair.webp. Use an ordinary product photo with room beside its subject for the desktop annotation and heading. A landscape 3:2 source of about 1500–2000px wide works well. You can replace the file, or edit the image src, width, height and alt in [data-pdt-photo]. Keep intrinsic dimensions accurate; the script uses the actual source geometry to map the markers. An optional <picture> can wrap the image, provided each source uses the same composition or you update feature coordinates for that composition.

data-x and data-y on each feature article are percentages of the full image, measured from its top-left corner. For example, data-x="72.5" data-y="48" places the arm marker 72.5% across and 48% down. Update these ordinary coordinates when changing the subject; no timeline or SVG-path editing is needed. The script computes the connector.

The load-bearing arrangement is an overflow-clipped viewport with an absolutely positioned image scene. Preserve those rules. --pdt-photo-ratio sets the desktop frame ratio and --pdt-mobile-photo-ratio sets the mobile frame (1.06:1 by default). --pdt-photo-position controls the overview crop when the image is wider than the frame: 0% favours its left and 100% its right. The example uses 88% to keep the chair complete on phones. Inspection states deliberately zoom/crop the image.

Add, remove or reorder details

Add, remove or reorder the semantic feature articles. Give each a label, heading, copy, data-x and data-y; the script derives both on-image markers and labelled choices. One or more details are supported; three to five concise details are usually easier to use. A single article works without next/previous furniture. If editing markup while already mounted, call revert(), perform the edit and mount again so controls reflect the new markup.

Brand controls

The .pdt token block groups colours, font, width, spacing and crop controls. Override them on one root for independent instances:

Code snippet omitted: it ships with the download.

Change matching RGB triples with their colours. Other edit points are --pdt-font, --pdt-display-weight, --pdt-content-width, --pdt-gutter, --pdt-space, --pdt-corner and --pdt-annotation-width. Keep annotations opaque and check contrast after colour edits. For example, a camera bag can replace Morrow: edit the identity/proposition, use a bag photograph, and label three articles “Woven shell”, “Quick-access closure” and “Removable divider” with coordinates matching the new photo.

Behaviour and options

Hook / option	Purpose
data-product-detail-tour	Instance root; all queries stay inside it.
data-duration="0.85"	Camera duration in seconds, clamped to 0–2.
data-zoom="1.1"	Default inspection zoom, clamped to 1–1.6.
Feature data-zoom	Optional per-detail zoom override.
data-pdt-feature	Semantic article and source for its two controls.
data-pdt-photo	Ordinary image used for camera geometry.
data-pdt-spec-link / data-pdt-specifications	Root-local specification action/destination.

Markers and labelled choices both select a detail. “Whole chair” returns to the complete overview. Arrow keys cycle details; Home and End choose the first and last; Escape returns to overview. The default framing uses a restrained 8–10% zoom and a smooth ease without overshoot. Input during motion continues from the current framing and settles to the newest request. Annotation height changes do not restart the camera. There is no free drag, ambient motion, scroll pinning or Lenis installation.

The script automatically mounts matching roots once the document is ready. For client-side insertion and removal:

Code snippet omitted: it ships with the download.

ProductDetailTour.get(root) returns the mounted instance or null. select(index, true) and overview(true) settle immediately. The root emits pdt:change with { index, feature }; overview uses index: -1 and feature: null. Revert restores complete readable content, original attributes/styles and removes generated controls, listeners, observation and instance animations.

Accessibility and integration

Native buttons support touch and keyboard and expose selection with aria-pressed. Enhanced inactive articles use hidden, aria-hidden and inert; generated controls reference unique article IDs. Reduced motion keeps every selection usable with immediate framing, and preference changes while mounted are handled. Without JavaScript or GSAP, all article copy and specifications remain visible and the CTA remains a normal link; enhancement controls are absent.

The section takes its natural content height and works in narrow host columns using the named product-detail-tour container. Photography and annotations are adjacent on phones; all choices remain visible. It does not change host typography, button styling or scrolling outside its root. Multiple roots mount independently. Pair viewport-width host tests with your own page's navigation and scroll behaviour; no backend or checkout is supplied.

Dependencies and credits

• GSAP core 3.12+; demo pinned to 3.15.0. No plugins required. GSAP.
• Manrope, by Mikhail Sharanda and Mirko Velimirović, SIL Open Font License. Loaded from Google Fonts in the example; you can self-host or use a different font token.
• chair.webp: generated fictional product concept photograph, created for this example. It depicts no real product, client result or testimonial. You may replace it with your own appropriately licensed photography.
• Section code is covered by the GSAP Vault licence supplied with your download. Third-party libraries and fonts keep their own licences.