---
title: "BeforeSwipe — Framer component · Best of Framer"
description: "$2.00 · Framer component · by Ævar Bernburg · Interactive. Drag between before & after images"
canonical: "https://framer.elliotli.dev/component/beforeswipe"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/BeforeSwipe

# BeforeSwipe

Drag between before & after images

[View on Framer](https://framer.com/marketplace/components/beforeswipe/?via=elliot-li)

![BeforeSwipe preview image 1](https://framer.elliotli.dev/og/component/beforeswipe/1502bff3f8a33d95/1600x1200.jpg)

## Summary

Drag between before & after images

## Description

## 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2617

## Details

- **Author**: Ævar Bernburg
- **Price**: $2.00
- **Published**: 2026-05-12
- **Updated**: 2026-07-08
- **Added**: 2026-05-09
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step