# Team Through the Project > A single team photograph travels between six people as their individual stories enter view during the scroll. Canonical: https://gsapvault.com/sections/team-directory-section Live demo: https://gsapvault.com/demos/team-directory-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | scroll-storytelling, guided-camera, image-focal-points, progressive-enhancement, reduced-motion, container-queries, responsive-section | | 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 Morrow Assembly is a fictional product studio whose strategy, design and engineering team stays close to the work. A wide shared photograph introduces all six colleagues together. As visitors scroll through six individual biographies, the photo moves and zooms from one face to the next, linking each person to their contribution across Understand, Shape and Build. The biographies stay in normal document flow beside a sticky photograph on desktop and beneath it on phones. The camera follows the reader's position rather than hiding content or taking over host scrolling. Reduced motion, missing JavaScript or blocked GSAP dependencies leave the full group image and every story readable. Replace the fictional copy, generated concept photograph and example contact link with verified studio information. ## Features - One generated group concept photograph with six editable face positions - Scroll-driven camera movement between individual team members - Six complete biographies grouped by project stage - Readable static fallback with the full group photograph - Reduced-motion support, independent roots and instance teardown - Container-aware desktop, mobile and narrow-host layouts ## Use Cases - Product studios introducing strategy, design and engineering leads - Creative agencies helping clients find the right specialist - Consultancies showing the people responsible for delivery - Nonprofits introducing programme and operations teams ## 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 team member is a semantic article containing their role, biography and contribution. Face coordinates and crop scale sit on that article as data attributes, while the single image remains a normal editable img element. The script measures article centres and interpolates the camera position between them as the reader scrolls. A brief opening view shows the complete team before the first close focus. ScrollTrigger is scoped to each section root. The photo uses CSS sticky positioning; no ScrollTrigger pin, smooth scroller or host navigation change is required. Reduced motion and missing dependencies show the full group photo and all six articles. Teardown removes only that instance's triggers, observers and state. ## 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 complete `
` from `index.html` and the `assets/` directory beside your page. Load: _Code snippet omitted: it ships with the download._ The demo `main`, body background and body margin are preview furniture. The section uses the host's normal page scroll; it does not install a smooth scroller or pin the page. ### Make it yours Edit the heading, introduction and contact link in the section header, plus the short caption below the photograph. Each `[data-team-person]` article contains one person's chapter, role, name, biography and contribution. Add, remove or reorder whole articles; the camera sequence and numeric counter derive from their document order. Update any written team count in the introduction or photo caption yourself. A single person also works. Change the `h2` to suit your page outline without changing its class. The root variables at the top of `assets/style.css` control colour, typography, width and gutters. Adjust these to rebrand the section, then check contrast. For example, an architecture practice could use a team portrait in its workshop, replace the six articles with its own staff, and change the accent and text variables without touching the camera code. #### Replace the photograph `assets/img/morrow-team-group.webp` is a generated 1774×887 concept photograph. Replace it with one ordinary wide team photograph, ideally at least 1600px wide with clear space around each face. Edit the `` `src`, intrinsic `width`/`height` and descriptive `alt` in `index.html`. The photo has no baked text or markers. With reduced motion or missing JavaScript, the whole image is shown. Each article's `data-focus-x` and `data-focus-y` locate that person's face as a fraction of the source image width and height: `0` is the left/top edge, `1` the right/bottom edge. `data-focus-scale` controls the crop (usually `1.5`–`2.2`). After replacing the photograph, adjust those three numbers per person while viewing desktop and phone crops. These attributes are the only photo-specific motion settings; no script changes are needed. The source PNG and portrait references in `assets/img-src/` are authoring inputs and are excluded from the buyer download. ### Behaviour and integration The script mounts each root independently. Its API is on `root.teamDirectory`: _Code snippet omitted: it ships with the download._ `window.TeamDirectory.mountAll(scope)` and `destroyAll(scope)` manage roots within an optional element. Repeated mounts return the same instance. Destroy before removing a root or changing its person articles, then mount again. Teardown removes only this instance's ScrollTrigger and observers. If a host changes the section's layout after loading, call `refresh()`. Normal keyboard and touch scrolling drive the same sequence. Reduced motion, no JavaScript and blocked GSAP dependencies leave the full group photograph and every biography readable in order. The section needs enough vertical room for the photo to remain beside the biographies on desktop; on narrow hosts it stacks above them. The contact link is an example email destination and should be replaced along with the fictional names and claims before publishing. ### Credits and licence - GSAP 3.15.0 and ScrollTrigger from jsDelivr, subject to the [GSAP standard licence](https://gsap.com/standard-license/). - Group concept photograph generated with OpenAI image generation on 23 September 2026, using five generated fictional portrait references. It does not depict real employees. - The section code is covered by the GSAP Vault licence. Replace the concept image with your own photograph without an image-generation service. ## 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