Plugin icon

Before & After Slider

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.

Vanyadoing
Vanyadoing
Creator
2 weeks ago2w ago
Updated
Paid
Pricing

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.

Changelog
Version 22 weeks ago

UI fixes

Become a creator today

Submit a template or plugin, get featured, and get paid – all in just a few clicks.

Avatar

Connelly Rader

Building Framer Templates in my free time. Framer Expert & Contra Top Independent.

9 Templates

Avatar

Favorit × Frame

Framer Expert Duo Crafting Client Sites and Minimal Templates With a Premium Touch.

8 Templates

1 Plugin

Avatar

ena supply

Building visually striking, and highly functional Framer sites.

19 Templates

Avatar

LottieFiles

1 Plugin

Avatar

LottieFiles

1 Plugin

Avatar

Clonify

An ever-growing design library of stunning sections and templates.

27 Templates

1 Plugin

    We use cookies to personalize content, run ads, and analyze traffic.

    Before & After Slider — Framer Marketplace