Slider

Split Column Infinite Slider

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Vanilla JS
Trigger: wheel

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: raf-lerp
Complexity: 3/5
Pinned: no
Reduced motion: not handled

lerped virtual scroll; per-frame clip-path reveal, opposite image drift and held title drift on a windowed, modulo-wrapped slide pool

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev7,911 charsCustomize

# Split Column Infinite Slider — Virtual Wheel Scroll, Opposite Clip-Path Reveals & Split Titles

## Goal
Build a fullscreen two-column project slider driven by…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.