Before/After Pro — Framer Code Component (Comparison Slider Gallery)

A before/after comparison gallery for Framer - multiple pairs in a responsive grid, a keyboard-operable handle, horizontal or vertical split, and a CMS link on every pair.

LIVE DEMO: https://thistle-timing-694660.framer.app/before-after-pro

KEY FEATURES

• Multiple comparison pairs in one component, 1-3 columns, container-based responsive
• - Keyboard-operable slider (rare among comparison sliders): focus the handle, use arrow keys, Shift for bigger steps, Home/End to jump - role=slider with aria-valuenow
• - Drag with pointer capture, works with mouse and touch
• - Horizontal or vertical split per your choice
• - Before/After label slots and per-pair title and caption
• - Per-pair CMS Link: connect each pair to its own CMS page or URL
• - prefers-reduced-motion support (interaction stays fully usable) and static-canvas fallback
• - Box-sizing safe: no horizontal overflow at any container width

HOW IT WORKS

After purchase you get the component URL - paste it into any Framer project and it installs instantly. Configure everything visually from the properties panel. Works on the Framer free plan.

Includes lifetime updates. Built by Aisol Studio. Pairs well with CMS Filter Gallery and CMS Link Carousel.