Double Vertical Slider
Two panels sliding in opposite directions from one set of controls.
StarterWeb appMedia2–5hAI-buildable 5/5no setup
The left column slides down while the right slides up, both driven by a single index. The trick is that one side's transform is inverted relative to the other, and both have to stay in sync through wrap-around.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 4
- Two stacked slide columns move in opposite directions
- Up and down controls drive both columns from one index
- The index wraps correctly at both ends
- Slide content stays paired across the two columns
The interesting part
- Keeping two inverted transform stacks synchronised through wrap-around
Once it works
- Add drag/swipe support
- Add slide-position indicators
Suggested stack
reacttypescripttailwinddnd-kitframer-motion