SeventeenAgency Scroll Animation
What it does
Infinite-scrolling contact page (Lenis infinite mode) where the contact-info section is cloned 10x into a seamless loop: two scrubbed ScrollTriggers per row animate its CSS gap from 1rem to 10rem and back as the row crosses the viewport center, while a fixed vignetted still at screen center cycles through seven captured-light images each time a new row locks onto the center.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Infinite-Scroll Contact Page — Center-Crossing Gap "Breathing" + Icon Cycling
## Goal
Build a full-screen, **endlessly looping** contact page. A tall list of contact rows scrolls
vertically forever (seamless infinite loop). As each row passes through the vertical center of
the viewport, the horizontal **gap between its label and value expands then snaps back**, giving a
"breathing" pulse to whichever row is centered. Simultaneously, a single **3D icon fixed at the
exact center of the screen swaps to the next shape** every time a new row locks onto center. That
center-crossing gap pulse synced with the icon swap is the star effect.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Build as a fresh Vite project (`npm create vite`,
vanilla template). Install and import from npm:
- `gsap` and the GSAP plugin **`ScrollTrigger`** (`import { ScrollTrigger } from "gsap/ScrollTrigger"`), registered via `gsap.registerPlugin(ScrollTrigger)`.
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.