Skip to content

component

Image Split View

By Adi Purdilă

Details

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 Copy the component URL and paste it into your Framer project. Drop in your two images using the left and right image controls. Adjust the handle, divider line, icon, and starting position. Enable and style labels if needed. 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 or 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.

Introduction

Before/after image comparison

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600165058/148/228/309/79/15
  • All · #6505