Split Image Compare

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

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