The Before & After Slider is a simple Framer component made for comparing two images side by side with a draggable slider.
It works well for showcasing redesigns, edits, renovations, transformations, and visual improvements in a more engaging way than static images.
Drag-to-compare interaction
Works on desktop and mobile
Touch and mouse support
Adjustable starting position
Optional before/after labels
Customizable slider handle
Responsive image scaling
Smooth animations
Upload your own before and after images directly in Framer.
Edit the text, style, and position of the labels or hide them completely.
Customize the size, color, shape, and icon of the draggable handle.
Adjust the corner roundness to match your design system.
Control the smoothness and speed of the interaction.
Portfolio projects
Interior renovations
Photo edits
Product comparisons
Fitness transformations
Case studies
AI image demos
Real estate staging
Two images are layered on top of each other, and users can drag the slider horizontally to reveal more or less of each image.
The component is optimized for both desktop and touch devices, making the interaction feel smooth across all screen sizes.
Before & After Slider component
Responsive support
Drag interactions
Editable labels
Custom styling controls
Ævar Bernburg
