---
title: "Split Image Compare — Free Framer component · Best of Framer"
description: "Free Framer component · by Utkarsh Arya · Interactive. Drag to reveal before & after images"
canonical: "https://framer.elliotli.dev/component/split-image-compare"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Split Image Compare

# Split Image Compare

Drag to reveal before & after images

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

![Split Image Compare preview image 1](https://framer.elliotli.dev/og/component/split-image-compare/05018f38133b7bfe/1600x1200.jpg)

## Summary

Drag to reveal before & after images

## Description

## Before After Slider

A lightweight, fully interactive image comparison component built for Framer. Drag the handle to reveal the before and after states of any two images, perfect for showcasing design transformations, photo edits, UI redesigns, or product comparisons.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-2fhg5aat-gUqVZBqyM26QdNvFym7FPHz8fmneL2)

### Features

-   **Horizontal & Vertical**: Switch drag direction from the property panel
    
-   **Interaction**: Choose from Drag and Hover interaction modes for slider control
    
-   **Configurable Start Position**: Set where the slider begins (0–100%)
    
-   **Custom or Default Handle**: Use the built-in pill handle or drop in any Frame as a custom handle
    
-   **Divider Control**: Adjust divider width and color
    
-   **Border & Radius**: Add rounded corners and an optional border
    
-   **Touch Support**: Works on mobile and tablet interactions in Framer
    
-   **No dependencies**: Pure React, no external libraries
    

### How to Use

1.  Copy & Paste the component onto your canvas
    
2.  Set your **Before** and **After** images in the property panel
    
3.  Choose **Direction**: Horizontal or Vertical
    
4.  Adjust **Start %** to set the initial slider position
    
5.  Customize the **Handle**, **Divider**, and **Border** to match your design
    

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

-   All · #450

## Details

- **Author**: Utkarsh Arya
- **Published**: 2026-04-15
- **Updated**: 2026-08-20
- **Added**: 2026-04-03
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step