---
title: "Before n After Slide — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Shane Divix · Interactive. Drag-to-reveal before/after"
canonical: "https://framer.elliotli.dev/component/before-n-after-slide"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Before n After Slide

# Before n After Slide

Drag-to-reveal before/after

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

![Before n After Slide preview image 1](https://framer.elliotli.dev/og/component/before-n-after-slide/1b9054f4170f8ebd/1600x1090.jpg)

## Summary

Drag-to-reveal before/after

## Description

## **Before and After Slider**

Before After is a premium drag-to-reveal comparison for Framer. Drag a glowing handle to uncover the transformation—built for renovations, product demos, beauty results, and agency case studies. Each instance uses its own Before and After images, so it's CMS-safe with multiple compares on one page.

### **Key Features**

• Custom dual images with smooth drag reveal

• Horizontal or vertical direction

• Soft aura glow around the frame

• Custom Before/After labels

• CMS-safe per-instance images

• Keyboard arrow control

• Canvas-safe static preview for the Framer editor

### **Controls**

Before / After — image slots for each side

Image fit — Cover or Contain

Direction — Left/Right or Top/Bottom

Start % — initial handle position (0–100)

Radius — corner rounding

Labels — show or hide chips

Before label / After label — custom text

Accent — handle and glow accent color

Handle — divider color

Line width — divider thickness

### Aura color / strength / spread — outer glow style

### **Perfect for**

Real estate renovations · Design studio case studies · Beauty and dental results · Product redesign reveals · SaaS old-vs-new stories · Any landing section that needs a clear transformation moment

Self-contained Framer code component with full property controls—no external libraries. Drop on the canvas, assign images, tune aura and handle, then publish.

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

-   All · #7822

## Details

- **Author**: Shane Divix
- **Price**: $4.00
- **Published**: 2026-07-20
- **Updated**: 2026-07-20
- **Added**: 2026-07-20
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase