Effects · Gutenberg
Scroll Reveal block for WordPress
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport.
Inspector panels on this block: Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Animation Type” options: Fade Up, Fade Down, Fade Left, Fade Right, Fade In; “Easing” options: Ease, Ease In, Ease Out, Ease In Out, Linear; “Distance (px)” (How far the element travels during the animation); “Trigger Threshold (%)” (% of element visible before trigger fires).
Where to find it
Gutenberg inserter → Effects → search “Scroll Reveal” (block name `blockenberg/scroll-reveal` in block.json). Style it in the sidebar after insert.
How to use Scroll Reveal block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Scroll Reveal”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Animation. Set “Animation Type”, “Easing”, “Duration (ms)”, “Delay (ms)”.
- Check the published page. The view script reads HTML data attributes: data-animation, data-delay, data-distance, data-duration, data-easing, data-once, data-opacity, data-rotate. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Animation Type | Select control; the chosen value is saved on the block. Options: Fade Up; Fade Down; Fade Left; Fade Right; Fade In; Zoom In; Zoom Out; Slide Up; Slide Down; Slide Left. block.json default: fade-up. Saved as `animation`. |
| Easing | Select control; the chosen value is saved on the block. Options: Ease; Ease In; Ease Out; Ease In Out; Linear; Spring (cubic); Back Out (cubic). block.json default: ease. Saved as `easing`. |
| Duration (ms) | Numeric range control in the inspector. Range 100–2000. block.json default: 600. Saved as `duration`. |
| Delay (ms) | Numeric range control in the inspector. Range 0–2000. block.json default: 0. Saved as `delay`. |
| Distance (px) | Numeric range control in the inspector. How far the element travels during the animation. Range 0–200. block.json default: 32. Saved as `distance`. |
| Scale Start (%) | Numeric range control in the inspector. Range 50–110. block.json default: 95. Saved as `scale`. |
| Rotate (deg) | Numeric range control in the inspector. Range -90–90. block.json default: 0. Saved as `rotate`. |
| Start Opacity | Numeric range control in the inspector. Range 0–99. block.json default: 0. Saved as `opacity`. |
| Trigger Threshold (%) | Numeric range control in the inspector. % of element visible before trigger fires. Range 0–80. block.json default: 15. Saved as `threshold`. |
| Animate Once | On/off toggle in the inspector. On by default. Saved as `once`. |
| Stagger Children | On/off toggle in the inspector. Apply incremental delay to each direct child element. Off by default. Saved as `stagger`. |
| Stagger Delay (ms) | Numeric range control in the inspector. Range 0–500. block.json default: 100. Saved as `staggerDelay`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animation, data-delay, data-distance, data-duration, data-easing, data-once, data-opacity, data-rotate.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport — that is the job of Scroll Reveal, not a generic content block.
- Use it when you need the editor control labeled “Animation Type”, which exists on this block’s inspector.
- It matches pages about scroll, reveal, animate.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Scroll Reveal block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Scroll Reveal”. It sits under Effects. After insert, open Animation and set “Animation Type”, “Easing”, “Duration (ms)”, “Delay (ms)”.
What makes Scroll Reveal different from other Blockenberg blocks?
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport. Inspector labels on this block include “Animation Type”, “Easing”, “Duration (ms)”, “Delay (ms)”.
Is the Scroll Reveal Gutenberg block free?
Yes. Scroll Reveal ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Scroll Reveal to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Animation).
Related effects blocks
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Scroll Reveal from the Gutenberg inserter.