---
title: "Image Split View — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Adi Purdilă · Interactive. Image Split View is a fully customizable before/after image comparison component for Framer."
canonical: "https://framer.elliotli.dev/component/image-split-view"
---

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

# Image Split View

Before/after image comparison

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

![Image Split View preview image 1](https://framer.elliotli.dev/og/component/image-split-view/428eb9ddbe5a1d1d/1600x1200.jpg)

## Summary

Image Split View is a fully customizable before/after image comparison component for Framer.

## Description

**Image Split View** is a fully customizable before/after image comparison component for Framer. Drop two images into the component, drag the handle left or right, and one image gradually reveals the other. Everything is configurable from the properties panel.

### **Best for**

-   Photo editing portfolios: original vs. retouched
    
-   UI/UX case studies: wireframe vs. final design
    
-   Before/after transformations: renovations, rebrands, packaging
    
-   Product pages: two colorways or finishes side by side
    
-   Service landing pages: show the impact before and after
    

### **Key features**

-   Draggable divider, works with mouse and touch
    
-   Click or tap anywhere to jump the divider to that position
    
-   Both images always fill the component with object-fit: cover
    
-   Configurable starting position (0-100%)
    
-   Handle: size, color, opacity, border, corner radius, shadow, and active state
    
-   Divider line: color, width, and style (solid, dashed, dotted)
    
-   26 built-in Lucide icons, or upload your own (SVG uploads are tintable)
    
-   Optional labels with full typography, color, background, and position control
    
-   Orientation-aware label positioning: Top/Bottom/Center for horizontal, Left/Right/Center for vertical
    
-   Behaves like a standard Framer frame: fixed size or fill parent
    

### **How to use**

1.  Copy the component URL and paste it into your Framer project.
    
2.  Drop in your two images using the left and right image controls.
    
3.  Adjust the handle, divider line, icon, and starting position.
    
4.  Enable and style labels if needed.
    
5.  Resize from the canvas. Enjoy!
    

### **Using the pre-made demos**

A remix link for the demo page is included. Copy any instance directly into your project and customize from there.

### **Refunds and support**

Due to the digital nature of this product, purchases cannot be refunded. Contact me at [adipurdila@gmail.com](mailto:adipurdila@gmail.com) or [x.com/adipurdila](http://x.com/adipurdila) before buying if you have questions.

Support includes: direct access to the author, help with features and settings, and assistance with reported bugs. Response time is up to 2 business days.

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

-   All · #7691

## Details

- **Author**: Adi Purdilă
- **Price**: $8.00
- **Published**: 2026-06-21
- **Updated**: 2026-06-21
- **Added**: 2026-06-21
- **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