Colour Chapter Showcase

Quick start

Open index.html through a local web server, or upload the folder to your hosting. No build step is required. GSAP and ScrollTrigger load from their CDN; photography is bundled locally and fonts use the system Arial/Helvetica stack.

To embed it, copy the marked SECTION START through SECTION END root into your page. Load assets/style.css, then GSAP, ScrollTrigger and assets/script.js once. Update relative paths to match your file structure. Omit the preview's body { margin: 0; } rule and its outer main if your page already has one.

Code snippet omitted: it ships with the download.

Make it yours

• Copy: edit the mast, .cc-title, chapter .cc-heading, .cc-copy, .cc-note and captions directly in HTML. The section opens with h2; chapters use h3. Change the tags to fit your page hierarchy; styling uses classes.
• Photography: replace the three assets/img/*.webp files or their src paths. Update alt text, captions and intrinsic width/height together. The first photograph is a wide landscape, the second almost square/portrait, and the last wide landscape. Images keep their natural aspect ratio.
• Brand: all controls are at .colour-chapters in the stylesheet: --cc-peach, --cc-lilac, --cc-green, --cc-ink, the two font roles, --cc-width, --cc-gutter, --cc-space, and --cc-corner. Keep dark text against light chapter colours, including every intermediate blend.
• Rebrand example: turn the essay into a three-stop coastal guide. Replace the title with “Three places to lose track of time”, chapter headings with place names, photographs with landscapes and colours with sand, mist blue and pale sage. No timeline edits are required.

Each article sets --cc-chapter to its palette token. Add or remove .cc-chapter articles using the existing content pattern; the controller measures actual chapter positions. One chapter simply stays static. After editing colours on a mounted section, call mountColourChapters(root) to read them again.

Behaviour and lifecycle

No pinning, smooth-scroll library, wheel interception or global colour changes. The background changes from when the next chapter is near 80% of the viewport height to when its top reaches 25%. It tracks scroll position directly, without a trailing catch-up animation. Text and photographs do not move independently.

Set data-colour-motion="off" on a root before mounting to retain the static chapter backgrounds. Spacing controls the reading distance; the script derives transition positions from the content rather than a fixed page height.

Code snippet omitted: it ships with the download.

Two roots operate independently and can override their tokens through separate root styles. Destroy a root before removing it in a framework route. Teardown reverts its GSAP/media context and disconnects its observer; it does not kill other animations. Resizing refreshes the section's measurements. Loading the script twice reinitialises existing roots rather than stacking triggers.

Accessibility and integration

The section uses native document scrolling, so keyboard scrolling and touch remain available. There are no custom controls or focus traps. Reduced motion, including changes while mounted, leaves static coloured chapters. No JavaScript or blocked animation dependencies also leaves the full readable document. Nothing is pre-hidden.

The root can fill a page or a narrow column; below a 760px container width the composition stacks. No sticky ancestors, fixed heights or scroll policy changes are required. Keep the section in the ordinary document scroller; custom nested scrollers need an explicit ScrollTrigger scroller integration. The demo's opening label is not a site navigation bar.

Dependencies and credits

Built with GSAP 3.15.0 and ScrollTrigger. GSAP's licence applies to the libraries; see https://gsap.com/licensing/.

Bundled photographs are cropped, resized and graded WebP derivatives of the following Unsplash sources, used as editorial examples under the Unsplash licence. Do not resell the photos as standalone images or build a competing image library. Replace the imagery for a client's actual projects; the journal does not claim to have designed the pictured buildings.

• Terracotta curves: https://images.unsplash.com/photo-1486718448742-163732cd1544
• White gallery and skylight: https://images.unsplash.com/photo-1439337153520-7082a56a81f4
• Curved facade: https://images.unsplash.com/photo-1493397212122-2b85dda8106b

There is no theme picker, external font, backend, or build-only runtime in the delivered section.