---
title: "Before After Utility — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Gwatsin T · Galleries. Drag to wipe between two images"
canonical: "https://framer.elliotli.dev/component/before-after-utility"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Before After Utility

# Before After Utility

Drag to wipe between two images

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

![Before After Utility preview image 1](https://framer.elliotli.dev/og/component/before-after-utility/8ad1d05811bd1996/1600x1200.jpg)

## Summary

Drag to wipe between two images

## Description

**Before After Slider** puts two layers on top of each other and lets visitors drag a divider across to wipe between them. Renovations, retouching, product finishes, colour grades, redesigns: anything that sells on the difference.

It is keyboard accessible, which almost no comparison slider is. Tab to the divider and the arrow keys move it, so it holds up for clients with accessibility requirements in the brief. The wipe is a clip on the top layer, so both images stay sharp at any size and both stay in the page.

Eleven property controls cover the starting position, horizontal or vertical wipe, drag or hover mode, smoothing, handle style and size, and the divider's width and colour.

**Two modes**

_Drag_. The visitor holds and moves the divider. The most control, and the safer default.

_Hover_. The divider follows the pointer without a click. Demos beautifully on a landing page.

**Setting up**

Paste the component link into your Framer project's Insert panel. Nothing to install. Put one layer in Before and one in After.

**Good to know**

Both layers need to sit at the top level of your page, alongside the breakpoint frame. That is how Framer slots work.

Give both layers the same size, or the reveal will not line up with the divider. Works with mouse, touch and keyboard.

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

-   All · #7311

## Details

- **Author**: Gwatsin T
- **Price**: $12.00
- **Published**: 2026-09-11
- **Updated**: 2026-10-24
- **Added**: 2026-09-11
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery