Split Column Infinite Slider
What it does
Two full-height columns driven by a virtual wheel or touch scroll: each project is a pair of photos, the left one revealed by a clip-path rising from the bottom and the right one descending from the top, with the images drifting in opposite directions and a single 100vw title block split across both columns that holds still while its slide is centred. Slides are created and removed around the current index with modulo wrapping, so the loop is infinite, and a light bar tracks progress.
How it's built
| Category | slider |
|---|---|
| Tech | vanilla JS |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
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.
# Split Column Infinite Slider — Virtual Wheel Scroll, Opposite Clip-Path Reveals & Split Titles
## Goal
Build a fullscreen two-column project slider driven by a **virtual scroll** (wheel or touch drag, lerped). Each project is a **pair of photos**: the **left** one is revealed by a `clip-path` **rising from the bottom**, the **right** one by a `clip-path` **descending from the top**, while their images **drift vertically in opposite directions** (with a fixed zoom to hide the drift) and a single **100vw-wide text block is split across both columns** — half the title in each — that holds still while its slide is centred and drifts a little on the way in and out. Slides are created and removed around the current index with **modulo wrapping**, so the loop is infinite in both directions. A thin **light bar** on the right shows progress through the set. No GSAP: per-frame arithmetic.
## Tech
Vanilla HTML/CSS/JS, one module. No libraries. Font: **Inter** (500–800).
## Layout / HTML
```html
<div class="sc">
<section class="sc-slider" aria-label="Projects">
<div class="sc-column sc-column--left"></div>
<div class="sc-column sc-column--right"></div>
<div class="sc-progress" aria-hidden="true"><span class="sc-progress__bar"></span></div>
…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