# Editorial Project Carousel

> An art-book featured projects carousel with a dominant image stage, synchronized project facts and outcomes, visible folio progress, case-study links and complete keyboard, button and swipe navigation.

Canonical: https://gsapvault.com/sections/editorial-project-carousel-section
Live demo: https://gsapvault.com/demos/editorial-project-carousel-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | carousel, drag, touch-drag, snap, keyboard-navigation, responsive-section, reduced-motion |
| 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

Editorial Project Carousel is a complete featured-work section for architecture studios, design agencies and portfolios. A large art-book masthead establishes the practice before four project stories pair landscape photography with a precise ledger of type, place, year and outcome. Each state ends with a clear route into the full case study.

The worked example is the fictional Fallow Office, a small architecture practice with a believable range of residential and adaptive-reuse work. The off-white sheet, expressive serif display, restrained metadata and single oxblood accent create a strong still without relying on animation or generic card UI. Root-level tokens collect every brand decision for straightforward reuse.

Without JavaScript or GSAP, all four semantic project articles remain available in a native horizontal CSS scroll-snap gallery. The enhancement adds synchronized project transitions, previous and next buttons, keyboard navigation and pointer/touch dragging without handling wheel input. Reduced motion changes state instantly, and every instance owns its listeners, observer, media context and teardown.

## Features

- Complete featured-work composition with positioning, dominant photography, project outcomes, metadata and case-study links
- Four synchronized project states with visible folio progress and edge-aware previous/next controls
- Pointer drag and touch swipe with horizontal intent while preserving vertical page scrolling
- Arrow, Home and End keyboard navigation from a visibly focused stage
- Interruptible GSAP transitions that settle to the last requested project
- Native CSS scroll-snap fallback with every project and link reachable without JavaScript or GSAP
- Reduced-motion mode with immediate project changes and no decorative movement
- Container-aware desktop, narrow-host and mobile arrangements
- Root-scoped brand variables, local image crops and independent instance teardown
- Four baked local architecture images with no remote image or font dependency

## Use Cases

- Architecture studio featured-project sections
- Interior design and landscape practice portfolios
- Creative agency case-study selections
- Independent designer and photographer work indexes
- Property and hospitality development showcases

## 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 project pairs a large photograph with its name, outcome, facts and case-study link. Previous and next buttons, keyboard navigation and horizontal swipes move the complete project into view together; visible folio progress keeps the visitor oriented. Repeated input settles on the latest requested project.

GSAP provides the transition, while reduced motion switches projects immediately. Without JavaScript or GSAP, every project remains available in a native scrollable gallery. Vertical page scrolling stays under the host page’s control.

The section adapts to desktop, mobile and narrower host columns. Multiple instances work independently, and removing or mounting one again leaves the surrounding page and its animations intact.

## 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 the stylesheet, GSAP core and the section script:

_Code snippet omitted: it ships with the download._

Copy the complete section root from `index.html`:

_Code snippet omitted: it ships with the download._

The body background and `<main>` in `index.html` are preview context. The extractable product starts at `<section class="fpc">` and ends at its closing tag.

### Make it yours

Edit the introduction in `.fpc__intro`, then update each `[data-fpc-project]` article:

- Replace the image file, intrinsic dimensions and useful `alt` text.
- Change the project name, outcome sentence and `Type`, `Place` and `Year` facts.
- Point `.fpc__project-link` at the real case-study URL.
- Update the folio number and `--fpc-progress` percentage when changing the project count.
- Adjust the article's `--fpc-position` when the replacement image needs a different crop.

The small brand system lives at the top of `assets/style.css` on `.fpc`. Repaint `--fpc-paper`, `--fpc-ink` and `--fpc-accent`, replace `--fpc-serif` and `--fpc-sans`, or change the width, gutter, section spacing and corner radius there. No external font files are required. For example:

_Code snippet omitted: it ships with the download._

Keep `--fpc-ink-rgb` synchronized with `--fpc-ink`; it supplies the muted text and rule colours. The 8:5 desktop and 5:4 narrow image crops are load-bearing parts of the composition, so inspect both after replacing imagery.

### Behaviour and options

| Attribute | Default | Purpose |
|---|---:|---|
| `data-duration` | `0.68` | Project transition duration in seconds. Use `0` for an immediate change. |
| `data-start` | `1` | One-based project number selected when the section mounts. |

The enhancement supports previous/next buttons, ArrowLeft/ArrowRight, Home/End and pointer or touch dragging. It never listens for wheel input, so page scrolling remains owned by the host.

Later-added roots can be mounted with:

_Code snippet omitted: it ships with the download._

Destroy one instance before removing it or replacing its markup:

_Code snippet omitted: it ships with the download._

Teardown removes that root's listeners and observer, reverts only its GSAP context and restores the native gallery. Calling the mount helper on an already-mounted root does not stack behaviour.

### Accessibility and integration

- The base document is a semantic horizontal CSS scroll-snap gallery. Without JavaScript or when GSAP is blocked, every project article and case-study link remains reachable.
- The enhanced stage has an accessible keyboard instruction, native buttons, visible focus and a polite status announcement. Inactive projects become inert only while the enhancement is mounted.
- `prefers-reduced-motion: reduce` keeps every control working and changes projects immediately.
- Touch dragging uses `touch-action: pan-y`, preserving vertical page scrolling. Mouse-wheel events are untouched.
- The source uses an `h2` for a page section and `h3` for projects. Adjust those levels to match the host document outline; the styling does not depend on tag names.
- The layout is container-aware and needs no sticky ancestor, full-width breakout, smooth-scroll library or host reset.
- For two instances on one page, copy the section root and edit each root's content normally. The implementation creates no fixed IDs and queries only inside each root.

The worked example and project results are fictional. Replace them with verified client copy before publishing.

### Dependencies and image credits

- GSAP core 3.12+ is required for the enhanced carousel. This demo is pinned to GSAP 3.15.0. No GSAP plugin is used.
- There are no remote font or runtime image dependencies.
- `assets/img/` contains the ready-to-use, art-directed WebP photographs. The source repository retains its stock registry and bake manifest for maintainers; those build inputs are excluded from the download.
- Longmere House: [Unsplash source](https://images.unsplash.com/photo-1464146072230-91cabc968266) — [Unsplash License](https://unsplash.com/license). The licence permits commercial and non-commercial use and modification, but does not permit selling an unmodified image or compiling a competing image service.
- Mira Court: [Unsplash source](https://images.unsplash.com/photo-1523217582562-09d0def993a6) — [Unsplash License](https://unsplash.com/license), with the same limits noted above.
- Canal Workshop: [Pexels source](https://www.pexels.com/photo/4328661/) — [Pexels License](https://www.pexels.com/license/). The licence permits use and modification, including in website templates; it does not permit selling unaltered copies, implying endorsement, redistribution on stock platforms or trademark use.
- Southbank Rooms: [Pexels source](https://www.pexels.com/photo/20548025/) — [Pexels License](https://www.pexels.com/license/), with the same limits noted above.

Replace the four delivered `.webp` files directly with your own appropriately licensed photographs, or change their paths in the project articles. Update each image's dimensions, alt text and crop as described above. No repository tools or image build step are required.

## 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