SideShift

Before / After Image Comparison

A smooth, interactive before-and-after image slider for showcasing transformations, redesigns, retouching, renovations, and visual comparisons.

Drag the handle horizontally to reveal the before and after states with responsive spring-based motion. The component is fully customizable through Framer’s property controls, so you can easily adjust the images, slider position, colors, handle size, line thickness, and animation feel without touching the code.

Features

• Smooth drag-to-compare interaction

• Spring physics for responsive, natural movement

• Click anywhere on the slider to reposition it

• Custom before and after images

• Adjustable initial slider position

• Customizable divider line color and thickness

• Customizable drag handle color and diameter

• Adjustable spring stiffness and damping

• Responsive to any frame size

• Accessible slider semantics and image labels

• No setup or external configuration required

Perfect for design transformations, photo retouching, architecture and renovations, UI redesigns, case studies, portfolios, and product showcases.