# Infinite Scroll Landing Page Template

> An endless landing page with full-screen photography, parallax, a hands-on crop study and a persistent project CTA. Built for creative agencies, photographer portfolios, fashion campaigns, product launches and events.

Canonical: https://gsapvault.com/templates/infinite-scroll-template
Live demo: https://gsapvault.com/demos/infinite-scroll-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | infinite-scroll, parallax, scroll-reveal |
| Uses Lenis | Yes |

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

Four scenes form a continuous landing page that returns to its opening photograph. Cobalt framing, oversized Manrope typography and art-directed fashion imagery give SECOND TAKE, the example production studio, a clear identity. The project invitation stays within reach throughout the reel.

Visitors can explore a closer photographic crop, jump directly between scenes and open a contact panel without losing their place. A visible loop toggle changes the experience into a finite page. Reduced-motion visitors receive the complete native document.

Use the structure for a creative agency, photographer portfolio, fashion campaign, product launch or event. Replace the studio copy, bundled photographs, colour tokens and email address to make it your own. The download is a self-contained static website with no build step.

## Features

- Four-scene infinite landing page with a finite-scroll switch
- Full-bleed opening photography with scroll-responsive depth
- Full-frame and close-crop photograph controls
- Persistent project CTA and accessible contact panel
- Direct scene navigation with a current-scene indicator
- Responsive compositions and a complete reduced-motion document
- Three locally bundled, graded WebP photographs

## Use Cases

- Creative agency landing page
- Photographer portfolio
- Fashion campaign microsite
- Product launch
- Event announcement

## Questions about this template

### Which businesses suit this infinite landing page?

The four-scene structure works for creative agencies, photographer portfolios, fashion campaigns, product launches and event announcements. SECOND TAKE is a fictional production studio showing one possible identity. Replace the selected study, service list and invitation while keeping the continuous introduction and persistent project CTA.

### Can visitors turn off the endless scroll?

Yes. The visible Loop on control switches the reel to a finite page, and the same control can restore the loop. Direct scene links remain available throughout. The contact panel pauses the page, so visitors can read the enquiry details without the background continuing to move.

### What photographs should I use in the opening and crop study?

Use a wide image with room for the opening headline and a clear subject that survives a narrow mobile crop. The selected study uses a separate portrait photograph with enough detail for a closer view. Three graded WebP files are bundled as examples, with original Pexels sources credited in the README.

### Does the project CTA send an enquiry or require a backend?

The CTA opens a contact panel containing an email link and the studio's services. It has no enquiry form, submission endpoint or stored messages. Replace the example email address in every link with your own, or connect the CTA to your booking tool or CRM contact page.

### Can I add scenes or make their copy longer?

The reel reads its scenes from the page and allows sections to grow when their content needs more room. Add an appropriate scene link when adding a section. Keep the opening composition concise, and check the complete journey on a phone after replacing text or changing image proportions.

## Vibe-Code Ready Setup

This template 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

### A landing page that returns to its opening

Four distinct scenes present the offer, selected work, studio and invitation. The last scene leads back into the first, with a visible switch for visitors who prefer a page with an end.

### Photography with depth and framing

The opening image moves gently against the passing page, while the campaign photograph expands into view. Two framing controls let visitors inspect the same photograph as a full composition or a closer detail.

### An invitation throughout the journey

The project CTA remains visible as scenes change. Its contact panel holds the studio email and services, then returns visitors to the place they left when closed.

### A complete alternative to the loop

Reduced-motion and no-JavaScript visitors receive a finite document with the same core content and email access. Scene links, native controls and a keyboard-operable contact panel keep the experience usable across input methods.

## Documentation

How this template 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

Open `index.html` in a browser, or upload the complete folder to a static host. Keep the `assets/` directory next to the HTML. No build step is required. Internet access loads Manrope, GSAP and Lenis; bundled photography is local.

Replace every `hello@secondtake.example` address before publishing. This reserved example domain is not a working inbox. The project CTA opens a contact panel; its email link launches the visitor's email application. No message is sent by the template, and there is no form backend or database.

### Using It With Your Own Design

Start with your studio or campaign name, the three photographs and the semantic colour tokens in `assets/style.css`. The worked example is fictional; the Open Air photographs illustrate a concept study, not a client commission or endorsement.

Keep the `data-scene` attribute and a unique ID on each scene inside `#reel`. The scene's value supplies the small current-scene label. Match its ID in the main navigation and `.scene-nav` links. Sections can be removed; links to removed scenes should be removed too. The generated loop continuation is built from the first scene and must not be authored by hand.

The `.scene` minimum height gives every composition room. The opening `.scene-media` overscans its container for parallax, so preserve its clipping and image overscan when adapting the layout. `data-parallax` is a conservative travel multiplier. The campaign frame, image and `data-crop` buttons form the crop interaction; retain their hooks to keep it working.

Header and bottom CTA dock are fixed. Their heights are declared as `--header-h` and `--dock-h`; scene padding reserves this space. Keep this relationship if changing the chrome size. Avoid long navigation labels or an opening headline that covers your subject's face.

### Sections

| Scene | Edit |
|---|---|
| Introduction | Headline, studio proposition, wide hero photo, concept caption |
| Selected work | Project title, description, portrait photo, full-frame/close-crop controls |
| Studio | Short statement, service list, production photograph |
| Invitation | Project prompt, contact links, return image, copyright line |

The header, scene index and project CTA remain visible while the scenes move. The underlined “next?” in the final headline opens the same contact panel, with an oversized pointing hand on hover or keyboard focus on larger screens. Touch visitors tap the underlined word directly. The contact panel is a native dialog with email access and service information. It is not a video player or a submitted enquiry flow.

### Options

| Hook or setting | Meaning |
|---|---|
| `data-scene="Selected work"` | A source scene and its navigation label |
| `data-parallax="0.14"` | Image travel factor; keep image overscan larger than travel |
| `data-crop="wide"` / `data-crop="close"` | Two crop controls for the containing campaign figure |
| `data-contact` | Enhance an ordinary email link into the contact-panel trigger |
| `data-loop-toggle` | Switch between infinite and finite scrolling |
| `data-smooth="off"` on `<html>` | Ship with the native finite page instead of Lenis |
| `?smooth=off` / `?smooth=on` | Preview the page without/with smooth scrolling |

Reduced motion wins over the smooth-scroll settings. The loop requires at least two scenes and an owned Lenis instance. An existing `window.lenis` belongs to the host and is never replaced.

### Palette

The single palette uses cobalt `#1845ed`, white `#ffffff`, cool-white `#eff1f5` and dark ink `#101527`. White on cobalt measures 6.75:1, and dark ink on cool-white measures 16.03:1. Alpha values reference each colour's RGB token. The photo scrim carries headline and supporting-text contrast; recheck it against any replacement photograph.

Manrope supplies all roles, from a broad, closely tracked display to small production labels. Change its Google Fonts link and `--font-display` / `--font-body` tokens together. Load only the weights you use.

### Images and Credits

Three cropped, graded WebP derivatives are included under `assets/img/` (approximately 512 KB combined). They are illustrative stock assets; replace them with your own commissioned work for a live studio portfolio.

- Opening and invitation: [two models in desert fashion](https://www.pexels.com/photo/elegant-fashion-photoshoot-in-desert-landscape-31317479/), Pexels photo 31317479.
- Crop study: [sculptural blue gown in the desert](https://www.pexels.com/photo/futuristic-fashion-in-desert-landscape-31317485/), Pexels photo 31317485.
- Studio: [crew on an outdoor production set](https://www.pexels.com/photo/behind-the-scenes-of-a-film-production-set-32439172/), Pexels photo 32439172.

Photography is covered by the [Pexels licence](https://www.pexels.com/license/), including permitted website-template use and its restrictions. It is separate from the code licence. Do not imply endorsement by pictured people or resell unaltered stock files.

In the Vault repository, `assets/img-manifest.json` records sources, crops, grade and output sizes. Rebuild after changing the manifest:

_Code snippet omitted: it ships with the download._

A downloaded site needs none of that tooling: replace the local WebP files, update dimensions and alt text in the HTML, and keep the same relative paths.

### Accessibility

The source document is complete without JavaScript. Its contact links remain ordinary email links. With JavaScript, crop buttons, scene navigation and the modal are keyboard operable. The dialog traps focus natively, closes with Escape and restores focus without moving the page. Email links retain their normal modified-click behaviour.

Reduced motion disables smooth and infinite scrolling and image parallax; crop changes become immediate. The services and all four source scenes remain visible on mobile. The loop continuation is inert, hidden from assistive technology and contains no duplicated IDs. Tab never enters it. Arrow keys, Page Up/Down, Space, Home and End are supported in the enhanced reel; form fields and buttons retain their native keys.

Use the Loop toggle to reach finite document edges. In embedded previews, the host's Stop interacting control or Escape releases the frame.

### Dependencies

Demo pins: GSAP 3.15.0 with ScrollTrigger; Lenis 1.3.17. GSAP compatibility floor: 3.12+. Manrope is loaded from Google Fonts. Dependencies use ordinary CDN script tags, while all photography and the template's own CSS/JS are local.

If the animation CDN is blocked, the document remains readable and the contact/crop controls still work without animation. If all JavaScript is unavailable, the page retains its native scene and email links.

### Browser Support

Modern browsers with native dialog, CSS small viewport units and standard JavaScript APIs. The responsive page uses a finite fallback wherever motion is reduced. Test the loop, navigation and contact panel after integrating with a host page that has its own scroll manager.

## 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 is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Infinite Scroll Landing Page Template](https://gsapvault.com/templates/infinite-scroll-template)
- [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