Effects · Gutenberg
Text Reveal on Scroll block for WordPress
Cinematic scroll-triggered text reveal: words or characters animate in one by one as the section enters the viewport. Supports fade, slide-up, clip, and blur reveal modes with staggered delays.
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
Cinematic scroll-triggered text reveal: words or characters animate in one by one as the section enters the viewport. Supports fade, slide-up, clip, and blur reveal modes with staggered delays.
Inspector panels on this block: Content, Reveal Animation, Accent Color. Those titles come from index.js, not from a shared template.
Behavior controls: “Accent Words (comma-separated)” (These words get the accent color); “Reveal Unit” options: Word by word, Character by character, Line by line; “Animation Style” options: Slide Up, Fade In, Blur In, Clip (curtain), Scale Up; “Text Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Text Reveal on Scroll” (block name `blockenberg/text-reveal-scroll` in block.json). Style it in the sidebar after insert.
How to use Text Reveal on Scroll block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Reveal on Scroll”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Main Text”, “Subtext (optional)”, “Heading Tag”, “Accent Words (comma-separated)”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Main Text | Multiline text field in the inspector. block.json default: We craft digital experiences that people love and businesses trust.. Saved as `text`. |
| Subtext (optional) | Text field in the inspector. Saved as `subtext`. |
| Heading Tag | Select control; the chosen value is saved on the block. block.json default: h2. Saved as `tag`. |
| Accent Words (comma-separated) | Text field in the inspector. These words get the accent color. Saved as `accentWords`. |
| Reveal Unit | Select control; the chosen value is saved on the block. Options: Word by word; Character by character; Line by line. block.json default: word. Saved as `revealUnit`. |
| Animation Style | Select control; the chosen value is saved on the block. Options: Slide Up; Fade In; Blur In; Clip (curtain); Scale Up. block.json default: slide-up. Saved as `revealAnim`. |
| Stagger Delay (ms) | Numeric range control in the inspector. Range 0–300. block.json default: 60. Saved as `stagger`. |
| Transition Duration (ms) | Numeric range control in the inspector. Range 100–2000. block.json default: 600. Saved as `duration`. |
| Trigger Offset (%) | Numeric range control in the inspector. Range 0–50. block.json default: 15. Saved as `triggerOffset`. |
| Animate Once | On/off toggle in the inspector. On by default. Saved as `once`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1600. block.json default: 900. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Gradient Accent | On/off toggle in the inspector. Off by default. Saved as `useGradient`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
| Colors — Text | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Accent Words | Color control in the inspector. block.json default: #7c3aed. Saved as `accentColor`. |
| Subtext | Color control in the inspector. block.json default: #64748b. Saved as `subtextColor`. |
| Gradient From | Color control in the inspector. block.json default: #7c3aed. Saved as `gradFrom`. |
| Gradient To | Color control in the inspector. block.json default: #ec4899. Saved as `gradTo`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Cinematic scroll-triggered text reveal: words or characters animate in one by one as the section enters the viewport. Supports fade, slide-up, clip, and blur reveal modes with staggered delays — that is the job of Text Reveal on Scroll, not a generic content block.
- Use it when you need the editor control labeled “Main Text”, which exists on this block’s inspector.
- 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 Text Reveal on Scroll block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Reveal on Scroll”. It sits under Effects. After insert, open Content and set “Main Text”, “Subtext (optional)”, “Heading Tag”, “Accent Words (comma-separated)”.
What makes Text Reveal on Scroll different from other Blockenberg blocks?
Cinematic scroll-triggered text reveal: words or characters animate in one by one as the section enters the viewport. Supports fade, slide-up, clip, and blur reveal modes with staggered delays. Inspector labels on this block include “Main Text”, “Subtext (optional)”, “Heading Tag”, “Accent Words (comma-separated)”.
Is the Text Reveal on Scroll Gutenberg block free?
Yes. Text Reveal on Scroll ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Reveal on Scroll 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: Content, Reveal Animation, Accent Color).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Reveal on Scroll from the Gutenberg inserter.