Side By Side Slide

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.