Infinite Scroll Loop — Playground

01Aurora

02Ember

03Forest

04Plum

01Auroraclone of §1 — the invisible seam

§1 / 4 · loops forever ↻

Auto-scrolling — reaching the clone jumps back one cycle, so it loops seamlessly. Wheel-scroll over the stage works too.

Infinite Scroll Loop — options

Section snapping

Auto-scroll speed 1.4

Run on mobile

How it loops

1. Mark a run of full-height sections as the loop group.
2. A clone of section 1 is appended after the last.
3. When the smoothed scroll reaches the clone (one full cycle past the top), it jumps back by exactly one cycle.
4. The clone is pixel-identical to section 1, so the wrap is invisible — seamless infinite scroll.

On a live site the smooth scroll is driven by Lenis; optional snapping gives the "one section per gesture" feel.

Sample option — updates as you tweak

// On the FIRST section of the run (Section → Animations → Infinite Scroll Loop);
// mark each full-height section of the loop group:
'scroll_loop' => [
    'mode' => 'loop',
    'loop' => [
        'snap'          => 'no',
        'run_on_mobile' => 'yes',
    ],
],

Infinite Scroll Loop is a Section-level control — mark each full-height Section of the run under its Animations tab. Everything above the group scrolls normally; the group sits at the bottom and loops forever downward. Smooth scroll is powered by Lenis (loaded only where used); it honours reduced motion (plain native scroll, no clone).

Watch it loop forever — leave Auto-scroll running (or wheel-scroll over the stage). This demonstrates the exact technique the real module uses: a clone of the first section is appended after the last, and when the scroll reaches the clone (one full cycle past the top) it jumps back by exactly one cycle. The clone is pixel-identical to section 1, so the wrap is invisible — seamless infinite scroll. Toggle section snapping for the "one section per gesture" feel.

What's simulated

On a live site the smooth scroll is driven by the Lenis smooth-scroll library and the loop sits at the bottom of the page (everything above it scrolls normally). This playground reproduces the clone + wrap-by-one-cycle loop and snapping inside a contained stage rather than embedding Lenis — the seam behaviour is identical.

Where it lives

Infinite Scroll Loop is a Section-level control — mark each full-height Section of the run under its Animations tab → Infinite Scroll Loop. Smooth scroll is powered by Lenis (loaded only where used); it honours reduce motion (plain native scroll, no clone).

← Back to Infinite Scroll Loop