Smooth Image Reveal: Free Interactions Component by Adam Sebesta

ImageReveal is a Framer component that wipes a color overlay away to reveal an image the moment it enters the viewport. Customize direction, color, transition, and delay. All from the properties panel, no code needed.

ImageReveal is a Framer component that adds a directional wipe animation to any image. A color overlay covers the image until it enters the viewport — then it sweeps away left, right, up, or down — with a feathered gradient edge for a smooth, polished finish.

Fully controllable, no code

Overlay color, wipe direction, object fit, border radius, and the full transition — including duration, easing, and delay — are all available in Framer's properties panel. Use delay to stagger multiple reveals for a choreographed entrance sequence.

Features

4 Reveal Directions: Left, right, up, or down — switch with one click.
Custom Overlay Color: Match any background color for a seamless reveal.
Feathered Gradient Edge: Smooth gradient at the wipe edge — not a hard cut.
Delay & Stagger Support: Use Framer's Transition control to delay and stagger multiple reveals.
Viewport Triggered: Fires once when the image enters the viewport.
Object Fit Control: Cover, contain, fill, none, or scale-down.
Border Radius: Rounded corners with full per-corner control.
No Code Required: Every setting lives in Framer's properties panel.
Fully Responsive: Works on desktop, tablet, and mobile.