# Expanding Link Shelf

> Five direct destination links with photographic panels or expressive typography. Hover and focus expand each route, and the last hovered route stays open.

Canonical: https://gsapvault.com/sections/expanding-link-shelf-section
Live demo: https://gsapvault.com/demos/expanding-link-shelf-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | beginner |
| Plugins | Core GSAP only |
| Techniques | hover-expansion, image-navigation, typographic-layout, responsive-section, reduced-motion, keyboard-navigation, progressive-enhancement |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (2 pages, lowest score shown), 25 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

Expanding Link Shelf is a complete directory section for arts venues, museums, community spaces and studios. The worked example is Morrow House, a fictional neighbourhood arts venue in Bristol, with direct links to exhibitions, film, workshops, conversations and visitor information.

The section carries the same five destinations in two visual treatments: Photo pairs each route with a locally bundled concept photograph and color/type plaque, while Type uses a solid color door and oversized route lettering. A Photo/Type preview switch compares the treatments without duplicating the directory. In either treatment, one route opens wide while the others remain visible; hover or keyboard focus widens a route and reveals its context and link cue. A small local script remembers the last hovered route after the pointer leaves.

CSS handles the panel movement and text reveal. Without JavaScript, the first route opens at rest and CSS hover and focus still work, but the shelf returns to its first route when the pointer leaves. The expanded copy stays at a fixed width and fades without shifting as panels grow. Touch devices and narrow host columns switch to complete stacked links. Reduced-motion preferences remove transitions. The concept photography depicts fictional scenes and does not represent a real client or venue result.

## Features

- Five native destination links with shared copy and two selectable visual treatments
- Photo treatment uses five locally bundled concept photographs and colored caption plaques
- Type treatment uses distinct system type roles and color fields, without photos
- Photo and Type preview tabs compare the same routes within one section product
- The expanded caption keeps a fixed width and fades without translating during panel growth
- One selected panel widens while the other four destinations remain visible
- The last hovered destination stays expanded after the pointer leaves
- Hover and keyboard focus share the same expanding state
- Each route has its own color, typeface and photo focal point
- Mobile and narrow host layouts show every complete linked destination without hover
- Reduced-motion mode keeps the same hierarchy and removes transitions
- CSS hover and keyboard behavior remain available without JavaScript; only hover memory needs the included local script
- Root-scoped variables group the shell, spacing, hero height and motion
- Routes, copy and photo slots stay together in editable semantic markup

## Use Cases

- Arts venue destination menus
- Museum or gallery programme directories
- Creative studio service indexes
- Festival or community programme landing pages
- Editorial and product category 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

The first route opens wide at rest and shows its destination title, context and link cue. Hovering a route records it as the active route, gives it more room and keeps it open after the pointer leaves; hovering another route changes the active one. Keyboard focus temporarily takes precedence. Every whole panel is a direct link. Choose Photo or Type from the preview tabs. Buyers select the shipped look on the section root with data-variant="photo" or data-variant="type".

The Photo plaque width is tied to the section rather than the animated card, and it fades without a vertical shift. This keeps its line breaks and position steady during expansion. At a narrow content width, or on a device without hover, the panels become a vertical list with every route detail visible. Without JavaScript, CSS hover/focus remain and the first route returns after pointer exit. Reduced-motion preferences remove the transitions.

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

Copy the `.dls` section, `assets/style.css`, `assets/interaction.js` and the local images in `assets/img/` into your site:

_Code snippet omitted: it ships with the download._

The extractable section begins at `<section class="dls">` in `index.html`. The body margin and the Photo/Type preview controls are demo context only. The buyer download contains the styles for both treatments; it does not include the preview picker.

### Choose a treatment

Set `data-variant` on the section root:

_Code snippet omitted: it ships with the download._

Use `data-variant="type"` for the solid-color, typographic doors. Both treatments use the same editable markup and links. The Photo version is the default in the preview.

### Make it yours

Edit the intro in `.dls__intro`, then edit each `<li class="dls__door">` in the labelled navigation list:

- Replace its `href`, route tab, context line, heading and link cue with your destination. The same route tab works in both visual treatments.
- Replace that route’s `<img src>` with your landscape photograph. The supplied concepts are 1536×1024 WebPs. Its `object-position` control lives on the matching `.dls__door--...` style modifier; adjust it to frame your subject. Photos appear in the Photo treatment only.
- `alt=""` is suitable when the route name already describes the linked destination. Write a concise photo alt if your replacement image adds useful information.
- Reorder list items to change route order. The first item opens wide at rest; after removal, the next item takes that place. Copy a `<li>` to add a destination and choose a matching style modifier. Three to five items are intended; check narrow previews if you add more.

The root tokens at the top of `assets/style.css` control paper, ink, content width, gutters, rail height, spacing, font roles and motion. Each route modifier groups its accent color, foreground, type role and photo crop. The route text is set on solid surfaces with at least 6.63:1 contrast in the supplied set; recheck foreground/background pairs after recoloring.

### Interaction and accessibility

At a wide desktop size, the first route is open at rest. Hover or keyboard focus expands a route while its neighbors remain visible. With `assets/interaction.js` included, the last hovered route stays open after the pointer leaves until another route is hovered. Each card is an ordinary anchor, and keyboard focus has a clear inset outline. If the pointer remains over another card while focus moves, the focused link wins.

The Photo caption uses a width tied to the section, not to the panel that is expanding. Its title keeps the same line breaks while the image panels move. The copy waits briefly as a panel opens, then fades in without a vertical shift. The Type treatment uses the same stable content width and fade.

Touch devices and narrow host columns show a short stack of complete destinations. The Photo treatment places the image above its copy; Type shows its color field and copy. Without JavaScript, every route stays readable and CSS hover/focus still expands a route; the first route returns when the pointer leaves. Reduced-motion preferences remove transitions.

The standalone demo adds a small Photo/Type picker. On the product page, the existing preview tabs control the embedded demo. The picker is excluded from the ZIP; the two styles ship in `assets/style.css`, so a buyer chooses one on the section root.

### Photos and dependencies

The five bundled images are fictional concept photography for Morrow House, a fictional neighbourhood arts venue in Bristol. They do not depict a real venue or client result. Each sample link uses `href="#"`; replace those targets with pages on your own site.

The section uses HTML, CSS, a small local pointer-memory script and local WebP images. It has no external fonts, hosted images or frameworks. The demo-only preview script is not part of the buyer download.

## What You Get

- `index.html`: working demo page
- `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