A Framer before-and-after slider is an interactive element that overlays two images and lets visitors drag a handle to reveal one image under the other. You build it in Framer with a code component or a comparison-slider plugin, since the drag-to-reveal interaction needs JavaScript. It is the standard way to show transformations like edits, renovations, or results.
Key Takeaways
- A before-and-after slider stacks two images and uses a draggable divider so visitors compare them by dragging left and right.
- Framer needs a code component or a plugin to power the drag interaction, because native layers cannot run the reveal logic alone.
- The two images must be identical in dimensions, alignment, and crop, or the comparison looks broken.
- Image optimization is critical, since you are loading two full images in one element and unoptimized files will slow the page.
- This element is a conversion driver for any business that sells a visible transformation, from photographers to contractors to clinics.
What a Before-and-After Slider Is For
The before-and-after slider, sometimes called an image comparison slider, shows two states of the same subject and lets the visitor control the reveal. A photo editor shows a raw shot under the retouched version. A renovation company shows the old kitchen under the new one. A dental practice shows teeth before and after treatment. The visitor drags a vertical handle across the image, and the top layer wipes away to expose the layer beneath.
It is persuasive because the visitor does the revealing. Instead of passively reading “we deliver great results,” they actively drag the slider and watch the transformation happen under their own hand. That interaction makes the result feel real and earned, which is exactly the feeling you want a prospect to have before they reach out. For any service where the value is visible, this element does more selling than a paragraph of copy.
When it fits, and when it doesn’t
Use a comparison slider when there is a genuine visual transformation to show: editing, construction, landscaping, cleaning, design, cosmetic treatments. Skip it when the two images are too similar to read at a glance, or when the “before” and “after” are not actually the same scene. A slider comparing two unrelated images confuses people. The whole effect depends on the two layers being the same shot in two states.
Why You Need a Component or Plugin
The drag-to-reveal behavior is interactive logic: the slider tracks the cursor or touch position and clips the top image accordingly in real time. Framer’s visual canvas does not produce that on its own, so you add it through a code component or a comparison-slider plugin. The plugin route is faster and requires no JavaScript; you upload your two images, position the handle, and style it. The code component route gives you control over the clip behavior, handle design, and any custom touches, at the cost of working with code.
For most projects a plugin is the right call. The Framer ecosystem has comparison-slider tools that handle touch support, smooth dragging, and responsive behavior out of the box. Our roundup of the best Framer plugins covers comparison sliders alongside other interactive elements, so you can pick a tool that fits your stack instead of building the interaction from scratch.
Prepare Your Images First
The single biggest factor in whether a comparison slider looks professional is image preparation. The two images must match exactly: same dimensions, same aspect ratio, same crop, same camera position, same framing. If the “after” is shifted a few pixels or shot from a slightly different angle, the slider exposes the mismatch as the handle moves across, and the effect collapses.
- Shoot or crop to identical framing. For real before-and-after pairs, lock the camera position so both shots align. For edits, the dimensions are already identical, which is the easy case.
- Match the aspect ratio precisely. Export both images at the same width and height in pixels.
- Align the subject. The key object should sit in the same place in both frames so the reveal reads as one continuous scene changing.
Building the Slider Step by Step
Step 1: Add the comparison element
Drop your chosen comparison-slider plugin or code component onto the canvas. It will give you two image slots, one for the “before” layer and one for the “after” layer, plus a draggable handle in the middle.
Step 2: Upload your matched images
Assign your prepared images to the two slots. Confirm immediately that they align by dragging the handle from edge to edge. If the subject jumps or the framing shifts, fix the source images before going any further; no amount of styling fixes misaligned source files.
Step 3: Style the handle and divider
Customize the divider line and the drag handle to match your brand. A thin line with a circular handle and a subtle arrow indicator is the conventional, intuitive pattern. Make the handle large enough to grab easily, especially for touch, and give it enough contrast to stand out against both images.
Step 4: Add a clear affordance
People need to know the slider is draggable. A small arrow icon on the handle, a faint “drag to compare” hint on first load, or a gentle initial animation that nudges the handle a few pixels all signal interactivity. Without a cue, some visitors will not realize they can drag, and the element sits unused.
Optimize the Images
A comparison slider loads two full-resolution images in a single element, which doubles the weight of that section. If the files are large, the page slows, and a slow page costs you conversions and search ranking. Compress both images, serve modern formats like WebP, and size them to the dimensions they actually display at rather than uploading oversized originals.
Framer handles a lot of optimization automatically, but you still control the inputs. Export at sensible dimensions and compress before uploading. For the full set of techniques, our Framer image optimization guide covers formats, compression, responsive sizing, and lazy loading, all of which apply directly to a media-heavy element like a comparison slider. Getting this right keeps the slider feeling instant rather than sluggish.
Make It Work on Touch and Mobile
Most visitors will encounter your slider on a phone, so touch support is non-negotiable. A good comparison plugin handles touch dragging by default, but you must test it. Open the page on an actual device and drag with your thumb; the handle should follow smoothly without the page scrolling underneath.
- Make the handle a comfortable tap-and-drag size, at least 44 pixels, so it is easy to grab on a small screen.
- Use Breakpoints to keep the slider readable; a wide landscape comparison may need to scale down or switch orientation on mobile.
- Confirm that dragging the handle does not accidentally trigger page scroll, which is the most common mobile bug with these sliders.
Vertical and Horizontal Reveals
Most comparison sliders wipe horizontally with a vertical divider, which suits side-by-side scenes like a room before and after a renovation. Some content reads better with a horizontal divider that wipes top to bottom, for instance a roof or a floor where the transformation runs along the vertical axis. Choose the divider orientation that matches how the eye naturally compares the two states. If the subject is wider than it is tall, a vertical handle usually wins; if it is a tall or top-down view, a horizontal wipe can feel more natural. A good comparison plugin lets you set the orientation, so pick it deliberately rather than defaulting to whatever the tool ships with.
Set a sensible starting position
The handle does not have to start dead center. Starting it slightly toward the “before” side, around 40 percent, gives the visitor a generous look at the original state while making clear that something better lies under the rest of the image. This subtle framing invites the drag without hiding the payoff. Whatever position you choose, make it consistent across every slider on the page so the section feels coherent rather than random.
Caption and Context Each Comparison
A slider on its own shows a change, but it does not explain what the visitor is looking at. Add a short caption: the service performed, the timeframe, or the location. “Kitchen remodel, completed in three weeks” turns an abstract transformation into a concrete result a prospect can map onto their own situation. The caption does not need to be long; one line of context multiplies the persuasive weight of the image. Place it directly under or beside the slider so the connection is obvious.
Combine It with Other Proof Elements
A comparison slider is strongest when it sits inside a broader proof section. Pair it with a short caption naming the service shown, and place it near client quotes or results. A page that combines a draggable transformation with rotating client praise builds a layered case: the visitor sees the work and hears from the people who received it. If you are designing that kind of social-proof section, our Framer testimonial slider guide pairs naturally with this element, since the two together cover the visual and the verbal sides of proof.
Putting It Together
A before-and-after slider in Framer comes down to matched images, a comparison component or plugin to power the drag, a styled handle with a clear affordance, careful image optimization, and tested touch behavior. Prepare the two images so they align perfectly, keep the files light, and make the drag obvious. The payoff is an interactive piece of proof that lets prospects feel your results instead of just reading about them, which is one of the most persuasive things a service site can offer.
If you want a transformation gallery or comparison slider built into a fast, polished portfolio page, see Framer Websites pricing for done-for-you Framer development.
Frequently Asked Questions
How do I add a before-and-after slider in Framer?
Use a comparison-slider plugin or a code component, since the drag-to-reveal interaction needs JavaScript that native layers cannot provide. Drop the element on the canvas, assign your before and after images to its two slots, style the handle, and test the drag across devices.
Why do my two images look misaligned in the slider?
The two images are not matched. A before-and-after slider requires identical dimensions, aspect ratio, crop, and subject alignment. If the after image is shifted or shot from a different angle, the reveal exposes the mismatch. Fix the source images so both frame the same scene before styling the slider.
Will a comparison slider slow down my page?
It can, because it loads two full images in one element. Compress both images, serve modern formats like WebP, and size them to the dimensions they display at. With proper optimization the slider stays fast; with oversized files it drags the page down and hurts both conversions and ranking.
Does the slider work on mobile and touch screens?
Yes, if the plugin supports touch, which most do, and you test it on a real device. Make the handle at least 44 pixels so it is easy to drag with a thumb, use Breakpoints to keep the comparison readable on narrow screens, and confirm dragging does not trigger page scroll.