Before & After Slider

Before & After Slider is an ultra-flexible, mobile-friendly Framer Plugin that lets you showcase stunning Before & After transformations with just a few props.

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 Labels Sit 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 .

Magic in every transformation