Side By Side Slide
Interactive slider component that lets users compare two images side-by-side with a draggable divider to reveal before/after transformations.
About the component
The component is fully customizable through the following properties found on the right panel:
Upload before and after images via the image properties
Choose between horizontal or vertical orientation
Set initial divider position (0-100%)
Customize divider color, width, and shadow effects
Toggle and style the circular handle
Control cursor behavior (resize, pointer, or hidden)
Enable/disable smooth cursor following mode
Usage To use the component, simply add it to your Framer project, upload your before/after images, and customize the properties as needed. Users can click anywhere to jump the divider, drag for precise control, or double-click to reset. The smooth animations and responsive design work perfectly across all devices, making it ideal for showcasing transformations, design comparisons, or any before/after scenarios without any coding required.
