---
title: "Image Swipe Reveal — Framer component · Best of Framer"
description: "$5.00 · Framer component · by John Valentine · Backgrounds. Add an interactive reveal effect to your designs with this polished mask component."
canonical: "https://framer.elliotli.dev/component/image-swipe-reveal"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Image Swipe Reveal

# Image Swipe Reveal

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

![Image Swipe Reveal preview image 1](https://framer.elliotli.dev/og/component/image-swipe-reveal/40bdf48193213691/1600x1200.jpg)

## Summary

Add an interactive reveal effect to your designs with this polished mask component.

## Description

Add an interactive reveal effect to your designs with this polished mask component. Display two layers—front and back—and smoothly transition between them on hover or drag.

**Features**

-   **Layered content:** front and back images or content
    
-   **Multiple reveal styles:** left, right, top, or bottom directions
    
-   **Mask options:** rectangle or circle wipe
    
-   **Custom controls:** reveal speed, easing, padding, border radius, background
    
-   **Interactive modes:** hover or drag gestures
    
-   **Polished design:** smooth transitions, soft edges, premium feel
    

Perfect for Before vs. After, portfolios, galleries, product reveals, and hover-driven storytelling.

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

-   All · #11169

## Details

- **Author**: John Valentine
- **Price**: $5.00
- **Published**: 2025-10-06
- **Updated**: 2025-10-06
- **Added**: 2025-10-01
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background