Team Through the Project

Quick start

Copy the complete <section class="team-directory" data-team-directory> 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 <img data-team-image> 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.
• 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.