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.
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.
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.
Aman Jandu
