# 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
``` Each slide created by JS: ```html

Northline

View project
``` Data (5 projects): Northline · Tidewater · Dune Route · Night Field · Concrete Hours, each with three short tags. ## Styling `:root`: `--sc-bg:#0a0b0d`, `--sc-ink:#f6f5f2`, `--sc-line:rgba(255,255,255,.22)`, `--sc-shade:.45`. - `.sc-slider` — `position:relative; width:100%; height:100svh; display:flex; overflow:hidden`. `.sc-column` — `flex:1; position:relative; height:100%; overflow:hidden`. - `.sc-slide` — `position:absolute; inset:0; overflow:hidden`; `img` `object-fit:cover; will-change:transform`. `.sc-slide__shade` — `position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,calc(var(--sc-shade)*.6)), rgba(0,0,0,var(--sc-shade)) 60%, rgba(0,0,0,calc(var(--sc-shade)*1.3)))`. - `.sc-copy` — `position:absolute; top:0; width:100vw; height:100%; pointer-events:none`; left column `left:0`, right column `right:0` — that is the whole trick: each column shows its half of the same 100vw block. - `.sc-copy__title` — centred (`top:50%; left:50%; translate(-50%,-50%)`), uppercase, `clamp(2.5rem,10vw,15rem)`, weight 800, `letter-spacing:-.03em; line-height:1; white-space:nowrap`. - `.sc-copy__tags` — at `top:31%`, centred, `display:flex; gap:.5rem`; each `li` is a glass chip (`padding:.45em .9em; border-radius:999px; border:1px solid var(--sc-line); background:rgba(255,255,255,.08); backdrop-filter:blur(12px); font-size:.72rem; weight 500; letter-spacing:.06em; uppercase`). - `.sc-copy__link` — at `top:64%`, centred, same glass pill at `rgba(255,255,255,.1)`, weight 600, `pointer-events:auto`, hover `rgba(255,255,255,.2)`. - `.sc-progress` — `position:absolute; right:1.25rem; top:50%; translateY(-50%); width:2px; height:120px; background:rgba(255,255,255,.15); overflow:hidden; z-index:10`; `__bar` fills it with a white→blue→pink gradient, `transform-origin:top; transform:scaleY(0)`. - `@media (max-width:1000px)`: tags stack vertically at `.62rem`. ## Effect (be exact) Build in `mount(config)` → `destroy()`. ```js const DEFAULTS = { scrollSensitivity: 1200, smoothness: .05, imageShift: 25, copyShift: 15, titleHold: .1, imageZoom: 1.25, revealOverlap: .5, bufferSlides: 3 }; ``` State: `position = 1`, `target = 1`, `columns = { left: { el, live: Map }, right: { el, live: Map } }`. - **Input**: wheel (passive) `target += deltaY / scrollSensitivity`; touch `target += (lastY − y) * 8 / scrollSensitivity`. - **create(side, index)**: `n = ((index % 5) + 5) % 5`; build the slide with `img src = ${side}_${n+1}.jpg`, `z-index = index + 1000` (later slides stack on top), append, store `{ el, img, copy }` in `live`. - **clip(side, reveal)**: `d = clamp(reveal, 0, 1) * (100 + revealOverlap)`; left → `polygon(0% ${100−d}%, 100% ${100−d}%, 100% 100%, 0% 100%)`; right → `polygon(0% 0%, 100% 0%, 100% ${d}%, 0% ${d}%)`. - **titlePos(progress)**: `from = progress − 1`; `past = |from| − titleHold`; if `past ≤ 0` return 1; `t = past / (1 − titleHold)`; return `1 + sign(from) * t*t*(3 − 2t)` (smoothstep away from the plateau). - **update()**: `first = floor(position) − bufferSlides`, `last = floor(position) + bufferSlides + 1`; for each side (`dir = left ? 1 : −1`): create missing indices in `[first, last]`, remove the rest; for each live slide `reveal = position − index`, `progress = clamp(reveal, 0, 2)`; set `clipPath = clip(side, reveal)`; `img.transform = translateY(${(1 − progress) * imageShift * dir}%) scale(${imageZoom})`; `copy.transform = translateY(${(1 − titlePos(progress)) * copyShift * dir}%)`. Finally `bar.transform = scaleY(frac)` with `frac = ((position mod 5) + 5) mod 5 / 5`. - **Loop** (rAF): `position += (target − position) * smoothness`; `update()`. **destroy()** — cancel rAF, remove listeners, remove all live slides, reset the bar. ## Assets / images Ten large photos (≥1200px tall — each fills half the screen at full height), five matched pairs with a shared mood per project (e.g. mountains/cliffs, sea/ice, road/dunes, milky way/aurora, two buildings). Files `left_{1–5}.jpg`, `right_{1–5}.jpg`. ## Behavior notes - The section captures the wheel for its own virtual scroll; use it as a standalone screen, not inside a normally scrolling page. - Because the copy block is `100vw` and clipped by each `50vw` column, the title is literally cut in half and the two halves move with different slides during a transition — that is the signature. - Touch works (drag = scroll); there is no pagination. - Only the prefixed variables are global. ## Images This component ships with 10 reference assets, served publicly. Use them as-is to reproduce the demo faithfully, then swap in your own — the layout expects the same aspect ratios. ``` https://motionprompts.dev/c/split-column-infinite-slider/left_1.jpg https://motionprompts.dev/c/split-column-infinite-slider/left_2.jpg https://motionprompts.dev/c/split-column-infinite-slider/left_3.jpg https://motionprompts.dev/c/split-column-infinite-slider/left_4.jpg https://motionprompts.dev/c/split-column-infinite-slider/left_5.jpg https://motionprompts.dev/c/split-column-infinite-slider/right_1.jpg … 4 more under https://motionprompts.dev/c/split-column-infinite-slider/ ``` They are hotlinkable for prototyping. For anything you ship, replace them: they are licensed for demonstration of this component, not for redistribution. ## Using this outside its demo page This component is written as a complete page — that is how the demo is meant to look. If you are dropping it into an existing project, or combining it with other components, these are the things it declares at document level and that you need to move or reconcile first. - **Palette on `:root`** — `--sc-bg`, `--sc-ink`, `--sc-line`, `--sc-shade`. These names are not namespaced and they collide: `--ink` is defined by 164 of the 219 components in this catalogue, `--paper` by 94, `--muted` by 80, each with different values — and they will also collide with whatever your own project defines. Move them onto the component's wrapper (`.my-section { --ink: … }`) or rename them with a prefix. - **Rules on `html, body`** — the demo owns the whole document, so these set the page background, typography and resets. Dropped into an existing project they restyle the entire page, not just this section. Re-target them at the component's wrapper before using it.