---
title: "BeforeAfterImage — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Niklas Geisler · Carousels. An interactive before/after slider"
canonical: "https://framer.elliotli.dev/component/beforeafterimage"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/BeforeAfterImage

# BeforeAfterImage

An interactive before/after slider

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

![BeforeAfterImage preview image 1](https://framer.elliotli.dev/og/component/beforeafterimage/568ec7d511457247/1600x1200.jpg)

## Summary

An interactive before/after slider

## Description

### ✨ Features

**🖱️ Two interaction modes**

-   **Drag** — visitors grab the handle and pull to compare
    
-   **Hover** — the divider follows the cursor for instant feedback (auto-falls-back to drag on touch devices)
    

**↔️ Five reveal directions**

-   Left → Right, Right → Left, Top → Bottom, Bottom → Top
    
-   Plus a radial reveal that opens from the center outward
    

**🎨 Fully styled to your brand**

-   Native Framer typography controls for all text (font family, weight, size, color, letter-spacing)
    
-   Custom colors for handle fill, handle border, and divider
    
-   Five built-in handle icons (arrows, dots, lines) plus the option to upload your own
    
-   Adjustable handle size, divider thickness, corner radius, and label placement
    

**📱 Mobile-ready out of the box**

-   Larger handle target on touch devices for easier tapping
    
-   Optional swipe hint that disappears after the first interaction
    
-   Separate text for horizontal vs. vertical reveals
    
-   Smart gesture detection prevents conflicts with page scrolling
    

**⚡ Polished by default**

-   Spring-based animation for natural-feeling movement
    
-   Backdrop-blurred labels that read clearly on any image
    
-   Sensible defaults that look great immediately — no setup required
    

### Use cases

Designer portfolios · Photo retouching showcases · Web redesign comparisons · Interior design before/after · Skincare and beauty results · Real estate staging · Product configurators · Restoration projects · Map and satellite comparisons

### 🚀 Getting started

Drop the component onto your canvas, swap in your before and after images, and adjust the size to match your layout. Everything else is optional — the defaults are tuned to look professional from the first render.

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

-   All · #8297

## Details

- **Author**: Niklas Geisler
- **Price**: $3.00
- **Published**: 2026-04-27
- **Updated**: 2026-04-27
- **Added**: 2026-04-26
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow