---
title: "StaggeredWipe — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Aman Jandu · Effects. A grid-based, cinematic reveal engine"
canonical: "https://framer.elliotli.dev/component/staggeredwipe"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/StaggeredWipe

# StaggeredWipe

A grid-based, cinematic reveal engine

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

![StaggeredWipe preview image 1](https://framer.elliotli.dev/og/component/staggeredwipe/587f63d70e6b564c/1600x1200.jpg)

## Summary

A grid-based, cinematic reveal engine

## Description

The **Staggered Wipe** is a high-performance entrance transition component for Framer that creates a "reveal" effect by deconstructing the screen into a grid of animated tiles. Unlike standard fade-ins, this component uses mathematical staggering to move elements off-screen in a choreographed sequence, giving the appearance of a physical curtain being drawn or a digital wall shattering.

### Core Mechanics: How it Works

The component works by overlaying a fixed, full-screen grid on top of your page content. This grid is then cleared based on the following logic:

-   **The Grid System:** It dynamically calculates a matrix of rows and columns. Each tile in the grid is an individual motion.div that knows its place in the sequence.
    
-   **Rank-Based Staggering:** The component uses a getGridRanks function to assign a "priority number" to each tile.
    
    -   **Left/Right:** Tiles exit in a linear wave.
        
    -   **Center:** Tiles expand outward from the middle like a ripple.
        
-   **Smart Cleanup:** It includes a done state. Once the very last tile (the maxRank) finishes its animation, the entire component unmounts from the DOM. This ensures your site remains interactive and doesn't waste browser resources.
    

### Key Customization Features

The code you've written provides a massive amount of flexibility for the end user:

**1\. Visual Fill Modes**

Users can choose how the "curtain" looks before it vanishes:

-   **Color Gradient:** Uses lerpColor to create a smooth transition between colorStart and colorEnd across the width of the grid.
    
-   **Image Slicing:** This is the most impressive mode. It takes a single image and "slices" it across the tiles using backgroundPosition math. When the grid moves, the image appears to break apart.
    
-   **Image + Color:** Overlays a tinted color on top of an image for a more branded, subtle look.
    

**2\. Animation Behaviors**

The component supports three distinct exit "vibes":

-   **Slide:** Tiles maintain their size and move out of the viewport.
    
-   **Scale:** Tiles shrink slightly while moving, creating a "zoom-out" depth effect.
    
-   **Fade:** Tiles simply dissolve in place (best for subtle reveals).
    

**3\. Physics & Timing**

-   **Easing Presets:** Includes "Snappy" for high-tech sites, "Bouncy" for playful brands, and "Smooth" for luxury experiences.
    
-   **Stagger Delay:** Controls the "tightness" of the wave. A low delay makes it look like a solid block; a high delay makes it look like individual falling debris.
    

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

-   All · #8858

## Details

- **Author**: Aman Jandu
- **Price**: $12.00
- **Published**: 2026-05-11
- **Updated**: 2026-05-11
- **Added**: 2026-04-21
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo