Scroll Reveal — Playground

↓ Scroll down to reveal

Reveal me

This element un-masks as it enters view.

Scroll inside the stage to reveal the Wipe Up effect.

Wipe Up — options

Duration (s) 0.7

Delay (s) 0

Easing

Replay on scroll

Sample option — updates as you tweak

'scroll_reveal' => [
    'mode' => 'up',
    'up' => [
        'duration' => 0.7,
        'delay' => 0,
        'easing' => 'cubic-bezier(0.22, 1, 0.36, 1)',
        'replay' => 'yes',
    ],
],

Scroll Reveal is a per-element control on the Animationstab — a clip-path wipe (up / down / left / right / iris / diagonal) or the Canvas Pixelate In for images. It fires on a passive scroll-into-view check and honours reduced motion (shown instantly). Only the one chosen style's CSS/JS ships.

Pick a reveal on the right, tweak its options, and hit Replay to watch the element un-mask. This runs the real module: the verbatim clip-path CSS for the six wipe directions (an element starts clipped and transitions to full when is-in is added) and the Canvas Pixelate In runtime (draw the image at a size fraction with smoothing off, then step the resolution up). On a live page the trigger is a passive scroll-into-view check; here the stage is always in view, so it plays on mount and on Replay. The Sample option updates as you tweak.

Where it lives

Scroll Reveal is a per-element control — open any element (Section, Column, heading, image, icon box…) → Animations tab → Scroll Reveal. Only the one chosen style's CSS/JS ships, and it honours reduce motion (shown instantly, fully revealed).

← Back to Scroll Reveal