---
title: "Before & After Slider — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Vanyadoing · Media. Before & After Slider is an ultra-flexible, mobile-friendly Framer Plugin that lets you showcase stunning Before & After transformations with just…"
canonical: "https://framer.elliotli.dev/plugin/before-after-slider"
---

[Home](/)/[Plugins](/plugins)/[Media](/plugins/category/media)/Before & After Slider

# Before & After Slider

Magic in every transformation

[View on Framer](https://framer.com/marketplace/plugins/before-after-slider/?via=elliot-li)

![Before & After Slider preview image 1](https://framer.elliotli.dev/og/plugin/before-after-slider/e80d0a4d0b05a1f3/1600x1200.jpg)

## Summary

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

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #247

## Details

- **Author**: Vanyadoing
- **Published**: 2025-04-27
- **Updated**: 2025-04-27
- **Added**: 2025-04-23
- **Categories**: Media

## More like this

-   [Model Prep](/plugin/model-prep) — Litchi Solutions · Free — Compress 3D models, add finishes
-   [Animated Diagram Builder](/plugin/animated-diagram-builder) — Luke Sn · Free — Build animated workflows visually.
-   [Bandwidth Saver - Cloudflare R2](/plugin/bandwidth-saver-cloudflare-r2) — Luke Sn · Free — Host videos in your own Cloudflare
-   [SVG Flower Generator](/plugin/svg-flower-generator) — Eugenio Ciccale · Free — Geometric SVG Flower Generator