BeforeSwipe

Drag between before & after images

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

Drag between before & after images