Before & After Slider: UI Kits Plugin by Vanyadoing

Screenshot 1 for Before & After Slider, a Framer Marketplace plugin by Vanyadoing.

Effortlessly compare before & after images with a fully customizable slider: add labels, style the handle, apply filters & fade-in effects, reset on exit, and choose static or attached labels - showcase your transformations with ease.

Before & After Slider

is an ultra-flexible, mobile-friendly Framer Plugin that lets you showcase stunning Before & After transformations with just a few props. It delivers smooth, performant image comparison out of the box - and gives you full control over every detail:

Dual Modes

Static LabelsSit anywhere you like (top/center/bottom × left/center/right), with adjustable margin.
Attached Labels“Glue” labels to the draggable handle for an interactive reveal.

Rich Label Styling

Pick your font family, weight & variable axes, size, text-color, background, padding, border (color, width, radius) and backdrop-filter. Labels fade out on drag and fade back in on release.

Image Effects & Fade-In

Apply per-image CSS filters - blur, grayscale, sepia, invert, contrast, brightness, saturate, hue-rotate or opacity. Optionally fade both images into view when they load (or when you tweak fade settings), with customizable duration & delay.

Handle Customization

Tweak every aspect of the knob:

Knob size, border-radius, background, border, box-shadow, backdrop-filter, icon-color & icon-spacing
Drag bars width, length, color, opacity & drop-shadow

Slider Behavior & Accessibility

Portrait mode for vertical comparisons
Disabled to lock the handle in place
Clip which side(s) get clipped by position%: first, second or both (perfect for transparent images)
Bounds Padding for extra inner margin around the handle
Follow Hover move on pointer hover without dragging
Only Handle require grabbing the knob to slide
Keyboard Step move by any % via arrow keys
Initial Position set the starting split (0–100%)
Animation configure easing, duration & delay for programmatic moves
Reset on Leave snap back to start when pointer exits

Frame & Container Styling

Round frame corners, add uniform or per-side borders, apply custom drop-shadows.

Use Cases & Inspiration

Whether you’re showcasing cosmetic makeovers, home renovations, product upgrades or scientific data, Before & After Slider makes comparisons beautiful, intuitive - and endlessly configurable. Here are just a few ways you can put it to work:

Beauty & Fashion
- Before/after makeup transformations
- Photo retouching vs. original
- Hairstyle makeovers
Architecture & Design
- Home renovation progress
- Room staging “before vs. staged”
- Historical restoration comparisons
Product & Marketing
- New vs. old product features
- Packaging redesign previews
- “Unboxing” vs. final setup
Medical & Scientific
- Medical imaging (e.g. MRI, X-ray) progression
- Satellite/environmental change over time
- Simulation vs. real-world results
Digital & UX/UI
- App interface redesigns
- Website version A vs. B
- Iconography or typography updates
Data Visualization
- Chart or map data “then vs. now”
- Heatmap comparisons
- Performance metrics over time
Creative & Miscellaneous
- Artwork before/after restoration
- Landscape or travel photography edits
- Any side-by-side storytelling

No matter your field - creative, commercial or scientific - Before & After Slider lets you reveal the magic of change with pixel-perfect control and seamless performance, all powered by react-compare-slider.