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.
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
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
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!
A remix link for the demo page is included. Copy any instance directly into your project and customize from there.
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.
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.
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
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
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!
A remix link for the demo page is included. Copy any instance directly into your project and customize from there.
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.
