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