section-002

Product Feature Story

Name: Product Feature Story
Brand: GSAP Vault

Included in the VaultGet the Vault

An editorial product feature section where a numbered chapter rail changes the inspected photography, technical facts and substantial story together with a refined, interruptible transition.

intermediate

5 more details

tabsstate-transitionstaggerresponsive-layoutkeyboard-navigation

Product Feature Story - website section preview

This section reads better at your own screen size than in the frame below:

Open the section in a new tab

About this section

A complete product feature story for tangible objects: a large photographic plate, numbered chapter navigation, measured technical facts and substantial editorial copy arranged as one composed section. The worked example is a precision listening system, but the ordinary edit points suit furniture, bicycles, lighting and other products whose design deserves explanation.

Read the full section overview

On desktop, the active photograph and article sit on either side of a narrow index. On mobile, the controls move directly above the image they change. Each chapter replaces the image, caption, facts and narrative as one state; GSAP gives the incoming plate a clipped settle and stages the copy behind it. Repeated input resolves to the last requested chapter without leaving mixed states.

With no JavaScript or a blocked dependency, all three feature stories remain visible as stacked semantic articles. Reduced motion changes chapters instantly. Every instance owns its IDs, listeners, media query and timeline, and its public destroy method restores the readable fallback without touching another section.

What's included

9 items

Complete editorial product composition with large photography, navigation, facts and long-form copy
Three coordinated chapters replace image, caption, specifications and narrative together
Asymmetrical desktop spread with the numbered chapter rail between photograph and article
Mobile controls sit immediately above the content they affect
Interruptible GSAP plate and copy transition always settles on the last requested chapter
Arrow, Home and End keyboard navigation with native tab semantics and visible focus
Reduced-motion instant changes and a complete stacked no-JavaScript fallback
Root-scoped variables, local IDs, independent instances and a documented teardown API
Bundled, inspected Pexels photography with editable crops and descriptive alternative text

Perfect for

4 use cases

Audio and consumer electronics product pages
Furniture and lighting collections with material stories
Performance bicycles and outdoor equipment
Industrial design launches that need detail beyond a hero

How it works

1 section

Each section root discovers its own tab and panel pairs and assigns instance-safe ARIA IDs. Selecting a chapter updates the accessibility state immediately, clears any interrupted visual state, then animates the requested image and story from a known baseline. GSAP matchMedia switches live between the motion and reduced-motion paths. The default CSS presents every article in document flow, while the enhanced class layers matching image and story regions into the designed spread. Destroying an instance removes its IDs, listeners and enhanced state, returning the complete stacked document.

Difficulty Intermediate

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

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

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Included in the Vault

Get the Vault to use this section.

The Vault includes Product Feature Story, the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Sections are available only in the Vault for now while the collection is small.

Get the Vault

Documentation

Quick start

Include assets/style.css, GSAP 3.12+ and assets/script.js, then copy the complete <section class="pfs-section" data-product-feature-story> from index.html. The preview opens directly on that root; the document wrapper is not part of the product. Replace the example specification links with your own destinations.

Code snippet omitted: it ships with the download.

The script mounts every matching root on DOM ready. To mount content added later, call ProductFeatureStory.mount(sectionElement).

Make it yours

Edit the kicker, h2, deck and the three .pfs-panel articles in the HTML. Each panel owns its image, alt text, caption, heading, paragraphs, fact list and link, so a content change does not require editing JavaScript. Keep the data-pfs-tab and data-pfs-panel numbers paired.

Replace the bundled files in assets/img/ or update each src, intrinsic width/height, alt, and its scoped object-position. The desktop plate is 4:5; the container query changes it to 5:4 in narrow hosts. Faces and focal points may need a separate mobile object-position.

Rebrand from the variables together at the top of .pfs-section in assets/style.css: graphite ground, chalk ink, signal accent, raised paper, font roles, maximum width, spacing and image radius. All translucent rules derive from the ink RGB triple. Check text and control contrast again after changing colours.

Behaviour

data-duration="0.62" on the section root controls the plate transition in seconds. The script exposes the instance at sectionElement.productFeatureStory:

Code snippet omitted: it ships with the download.

destroy() removes only that instance's listeners, generated IDs, media query and animation, then restores the complete stacked fallback. Mount the same root again with ProductFeatureStory.mount(sectionElement).

Accessibility and integration

The feature index uses the ARIA tabs pattern. Arrow keys move between chapters; Home and End move to the first and last. Focus remains visible, touch uses ordinary button taps, and reduced motion changes the complete state immediately. With no JavaScript or missing GSAP, the controls stay hidden and all stories remain readable in document order.

The shipped heading is an h2; change the tag to fit the host document without changing any selector. The section is container-aware and needs no full-width wrapper, pinning, smooth scrolling or fixed height. Links are examples and should point to real destinations.

Dependencies and credits

GSAP core 3.15.0; compatible with GSAP 3.12+.
Photography from Pexels under the Pexels licence, baked into local WebP derivatives:
- Studio Saiz, speaker and music records
- Studio Saiz, turntable on display
- Mete Kaan Özdilek, turntable tonearm close-up

The Aster A7 name and product claims are fictional demonstration copy.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.