# Product Feature Story > 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. Canonical: https://gsapvault.com/sections/product-feature-story-section Live demo: https://gsapvault.com/demos/product-feature-story-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | tabs, state-transition, stagger, responsive-layout, keyboard-navigation | | 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 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. 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. ## Features - 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 ## 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 ## 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 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. ## 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 Include `assets/style.css`, GSAP 3.12+ and `assets/script.js`, then copy the complete `
` 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](https://www.pexels.com/license/), baked into local WebP derivatives: - Studio Saiz, [speaker and music records](https://www.pexels.com/photo/a-speaker-standing-next-to-a-shelf-with-music-records-20002392/) - Studio Saiz, [turntable on display](https://www.pexels.com/photo/record-player-on-display-20002390/) - Mete Kaan Özdilek, [turntable tonearm close-up](https://www.pexels.com/photo/dj-mixer-in-close-up-26315453/) The Aster A7 name and product claims are fictional demonstration copy. ## 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