Transformation Stories

Quick Start

1. Add assets/style.css to your page.
2. Copy the complete section between the EXTRACT comments in index.html.
3. Copy assets/img/ and update image paths as needed.
4. Load GSAP, followed by the delivered assets/script.js:

Code snippet omitted: it ships with the download.

No buyer build step, plugins or remote fonts are required. The preview body styling is demo furniture; omit it from the host page.

Make It Yours

Edit the heading, tab labels, room titles, summaries, change lists and native <details> notes directly in HTML. Keep the main summary concise; longer explanations belong inside the notes. Replace each photograph and its alt text, dimensions and crop. Each pair must show the same subject from the same viewpoint. Generated concepts must remain clearly labelled; real project claims need genuine corresponding photographs.

Brand controls live on .tfs at the beginning of assets/style.css: paper, ink, muted, accent and rule colours; font roles; gutter, content width and preferred media height. Content can grow naturally. The default h2/h3 hierarchy may be changed to match the host page.

The download includes the ready-to-use WebP photographs in assets/img/. Replace those files directly, or edit each image path in the HTML; no repository tooling is required. Image masters and full generation prompts are retained in the source repository and excluded from the download. The living-room pair is reused from the Before / After Compare effect; the dining and kitchen pairs combine licensed source photography with generated concept variants. Kitchen geometry has small generative differences and must not be presented as documentary evidence.

Behaviour and Options

Code snippet omitted: it ships with the download.

data-transition controls story transition duration in seconds; 0 switches instantly. Each [data-compare] accepts data-compare-start="0.42" (initial proportion before) and data-compare-flex="0.08" (flexible seam response). The comparison adapts the existing Before / After Compare effect, retaining its flexible edge, momentum and detents.

Hook	Purpose
data-transformation-stories	Independent section root
data-story-selector	Enhanced tab list
data-story-select="0"	Zero-based story selector
data-story	Complete room article
data-compare	Comparison instance
data-compare-frame	Focusable enhanced slider
data-compare-before / data-compare-after	Full photographic states
data-compare-position="1" / ".5" / "0"	Before / Split / After shortcuts

Pointer dragging moves the seam. Tapping the image sweeps the comparison. Arrow keys adjust it; Home/End reach the extremes and Enter toggles the view. The explicit buttons expose both endpoints and a split view. Vertical touch gestures remain available for page scrolling. New story input interrupts an in-flight transition and settles on the latest selection.

Lifecycle

Code snippet omitted: it ships with the download.

Mounting skips active roots. Teardown removes only the instance's events, GSAP context, tickers and generated comparison SVG, and restores the original stacked articles, attributes and inline presentation. Multiple instances retain independent selection and comparison state. Never use global GSAP cleanup.

Accessibility and Integration

• Native buttons become tabs only after successful enhancement. Arrow keys, Home and End select a story; Tab continues into its controls.
• The comparison frame exposes slider semantics and the before/after percentage. It has visible keyboard focus and explicit state buttons.
• Reduced motion switches stories instantly and removes the flexible spring response while keeping all content controls operable.
• Without JavaScript or GSAP, every story and both photographs remain visible. Inoperative controls are hidden.
• All three choices stay visible on mobile. The image follows the tabs and its summary follows the image. Desktop keeps the active summary beside the photograph.
• Native notes expand into normal document flow; no fixed-height text clipping or nested scroll panel is required.
• The section uses container queries, installs no Lenis, and does not pin or change host scrolling. Verify your actual embedded height and narrower host columns after changing copy.

Dependencies and Credits

GSAP 3.12+; demo pin 3.15.0. No additional plugins. The comparison mechanism is adapted from Before / After Compare and is included in this section's script; no files from that effect are required. SVG is used only for the functional comparison mask and seam, not as a substitute for photographic content.

• Living room: the furnished photograph is by Spacejoy on Unsplash. The empty-room view is an AI-assisted concept edit of that photograph.
• Dining room: the furnished photograph is from Pexels. The empty-room view was generated from it, retaining the viewpoint while removing furnishings.
• Kitchen: the original photograph is from Unsplash. The renovated view is a generated concept edit with oak cabinetry and pale stone finishes; it is not a record of completed work.

The Unsplash License permits commercial use and modification, but not selling an unmodified image or compiling a competing image service. The Pexels License permits use and modification, including in templates, but not selling unaltered copies, implying endorsement or redistribution on stock platforms. Generated edits are illustrative and must not be presented as real client results.