Splitshot
A polished, interactive before/after image comparison component. Drag the divider to reveal the difference between two images — works with both mouse and touch.
About this Component
BeforeAfter Slider lets you place a draggable comparison between any two images directly on your Framer canvas. Perfect for showcasing design transformations, photo edits, product changes, or any visual before/after story.
Features
Drag anywhere on the component — not just the handle
Smooth snap animation on click, instant response while dragging
Full touch support for mobile
Rounded end-caps on the divider bar for a polished look
6 property controls: Before image, After image, Start position, Border radius, Divider color, Handle color
Fully responsive — fills any frame size
No code required. Drop it, set your images, done.
