Before / after slider · for Framer
Reveal the
difference.
A before/after comparison slider that moves like paper over paper. One-frame drag, scroll-safe touch, full keyboard control and up to three pairs.
Fig. 01 — Coastal Villa, site and finished house
Drag
1 frame
Painted with requestAnimationFrame. No re-renders while you move.
Touch
Scroll-safe
Vertical swipes scroll the page. Sideways swipes compare.
Tap
Glide
Tap anywhere and the divider glides there.
Keyboard
← →
Arrows, Shift for bigger steps, Home and End.
Dependencies
0
Nothing beyond React and Framer.
02 — Playground
Every setting,
live.
The panel drives the real component with the same props you get in Framer’s properties panel. Change one and its value shows over the preview.
03 — Handles
Three handles.
Two directions.
A circle, a pill or a bare line. Run it left to right, or top to bottom for tall images and interiors.
Circle handle
Forest Pavilion
Pill handle
Cliffside Retreat
Line handle
Hillside House
Vertical
Wabi Residence
04 — Series
Three pairs.
One slider.
Group up to three comparisons in one component. Arrows step through them, with an optional label and counter underneath.
Each pair has its own before, after and label
The divider glides back to its start on every change
Empty pairs are skipped automatically
05 — CMS
Bind it to
your CMS.
Every image is a normal image property, so it binds to CMS fields like any other layer. Drop Reveal into a Collection List and each item gets its own comparison.
Cliffside Retreat
Residential
Forest Pavilion
Residential
Wabi Residence
Hospitality
Hikari Boutique
Commercial
Live from this site’s own Projects collection: four of its eight items, each one a Reveal bound to the Before and After fields.
06 — Built in
Small details,
done properly.
Everything here is in the one file you install. No settings to switch on, nothing extra to load.
01
One-frame drag
Dragging writes a single CSS variable once per frame. React stays out of the way, so the divider never lags behind your hand.
02
Scroll-safe touch
On phones a vertical swipe scrolls the page and a sideways swipe compares. Nobody gets stuck on your slider.
03
Tap to glide
Tap or click anywhere on the image and the divider glides to that point with a soft ease.
04
Keyboard and screen readers
A real slider role with live values. Arrow keys, Shift for bigger steps, Home and End.
05
Images stay put
No drag ghosts, no long-press menus and no accidental selection, on desktop or iOS.
06
Make it yours
Handle style and size, divider width, colours, labels, hint text, corner radius and shadow.
07 — FAQ
Questions,
answered.
The short version of what Reveal does, how it fits into Framer and what it asks of your site.
What is Reveal?
How do I add Reveal to my Framer site?
Can I connect Reveal to the Framer CMS?
Does Reveal work on phones?
Is Reveal accessible?
Can one slider show more than one comparison?
Will Reveal slow down my site?
08 — Install
Drop it in.
Drag it.
One file. Paste it into your project, pick two images, publish.
Get Reveal
React and Framer only · No dependencies