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