Split Image Compare

Drag to reveal before & after images

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. 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 Copy & Paste the component onto your canvas Set your Before and After images in the property panel Choose Direction : Horizontal or Vertical Adjust Start % to set the initial slider position Customize the Handle , Divider , and Border to match your design

Drag to reveal before & after images