About BeforeSwipe
Overview
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.
Features
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
Customization Options
Images
Upload your own before and after images directly in Framer.
Labels
Edit the text, style, and position of the labels or hide them completely.
Slider Handle
Customize the size, color, shape, and icon of the draggable handle.
Border Radius
Adjust the corner roundness to match your design system.
Animation
Control the smoothness and speed of the interaction.
Great For
Portfolio projects
Interior renovations
Photo edits
Product comparisons
Fitness transformations
Case studies
AI image demos
Real estate staging
How It Works
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.
Included
Before & After Slider component
Responsive support
Drag interactions
Editable labels
Custom styling controls