Animation Engine
Scroll Reveal
A clip-path wipe, shape iris, strip reveal or a canvas resolve that uncovers any element as it scrolls into view — 22 styles: directional & corner wipes, split / box / rounded, diamond / ellipse / chevron / triangle irises, blinds & bars, plus Pixelate In and Dissolve In. Per element, self-contained, reduced-motion safe.
Live demo
See it in action
22 reveal styles, per element
Uncovered as it arrives.
Every card below is revealed by a clip-path, a mask or a canvas resolve the moment it enters the viewport — set from the element’s Animations tab. These replay every time, so scroll up and back down to watch them again.
Directional & corner wipes
A clip-path uncovers each card from an edge or corner
Wipe Left
Revealed →
Wipe Right
Revealed ←
Wipe Up
Revealed ↑
Wipe Down
Revealed ↓
Diagonal
Corner to corner
Diagonal ↗
From top-right
Diagonal ↙
From bottom-left
Diagonal ↘
From bottom-right
Split, box & shape irises
Open from the centre, or grow a shape outward
Split Horizontal
Barn doors
Split Vertical
Top & bottom part
Box Expand
Grows from centre
Rounded Box
Squircle squares off
Iris (circle)
Circle opens
Diamond
Rhombus opens
Ellipse
Oval expands
Corner Iris
Circle from a corner
Chevron
A V-edge sweeps
Triangle
Grows from an apex
Strips & canvas resolves
Venetian strips, or an image that resolves block-by-block
Blinds
Horizontal strips open
Bars
Vertical strips open
Pixelate In
Blocks resolve to sharp
Dissolve In
Random blocks fill in
All 22 reveal styles
Pick one, tune duration & easing (or block size for the canvas resolves)
Wipe Left
Wipe Right
Wipe Up
Wipe Down
Iris
Diagonal
Diagonal ↗
Diagonal ↙
Diagonal ↘
Split Horizontal
Split Vertical
Box Expand
Rounded Box
Diamond
Ellipse
Corner Iris
Chevron
Triangle
Blinds
Bars
Pixelate In
Dissolve In
How to set it up
Add it in under a minute
- Open any element → Animations → Scroll Reveal.
- Pick a style — a wipe, shape iris, blinds/bars, or a canvas Pixelate / Dissolve — and set its options.
- Turn on Replay on scroll to re-run it on every re-entry.
- Save and scroll to it.