Effects · Gutenberg
Scrollytelling block for WordPress
Sticky background or image that updates as the user scrolls through text chapters.
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
Sticky background or image that updates as the user scrolls through text chapters.
Inspector panels on this block: Layout, Default Background. Those titles come from index.js, not from a shared template.
Behavior controls: “Sticky Height” options: 50vh, 70vh, 100vh (Fullscreen); “Text Panel Position” options: Left, Right, Center; “Transition Style” options: Fade, Slide.
Where to find it
Gutenberg inserter → Effects → search “Scrollytelling” (block name `blockenberg/scrollytelling` in block.json). Style it in the sidebar after insert.
How to use Scrollytelling block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Scrollytelling”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Layout. Set “Sticky Height”, “Text Panel Position”, “Transition Style”, “Panel Width (px)”.
- Check the published page. The view script reads HTML data attributes: data-index, data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Sticky Height | Select control; the chosen value is saved on the block. Options: 50vh; 70vh; 100vh (Fullscreen). block.json default: 70vh. Saved as `stickyHeight`. |
| Text Panel Position | Select control; the chosen value is saved on the block. Options: Left; Right; Center. block.json default: left. Saved as `textPosition`. |
| Transition Style | Select control; the chosen value is saved on the block. Options: Fade; Slide. block.json default: fade. Saved as `transitionStyle`. |
| Panel Width (px) | Numeric range control in the inspector. Range 280–700. block.json default: 420. Saved as `panelWidth`. |
| Show Chapter Progress | On/off toggle in the inspector. On by default. Saved as `showProgress`. |
| 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`. |
| Eyebrow | Color control in the inspector. block.json default: #a5b4fc. Saved as `eyebrowColor`. |
| Colors — Title | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Body Text | Color control in the inspector. block.json default: #e5e7eb. Saved as `textColor`. |
| Panel Background | Color control in the inspector. Saved as `textBg`. |
| Progress Indicator | Color control in the inspector. block.json default: #6366f1. Saved as `progressColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Eyebrow | Text field in the inspector. |
| Overlay % | Numeric range control in the inspector. Range 0–90. |
What the front-end script actually does
- The view script reads HTML data attributes: data-index, data-opts, data-rendered.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Sticky background or image that updates as the user scrolls through text chapters — that is the job of Scrollytelling, not a generic content block.
- Use it when you need the editor control labeled “Sticky Height”, which exists on this block’s inspector.
- It matches pages about scroll, sticky, story.
- 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 Scrollytelling block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Scrollytelling”. It sits under Effects. After insert, open Layout and set “Sticky Height”, “Text Panel Position”, “Transition Style”, “Panel Width (px)”.
What makes Scrollytelling different from other Blockenberg blocks?
Sticky background or image that updates as the user scrolls through text chapters. Inspector labels on this block include “Sticky Height”, “Text Panel Position”, “Transition Style”, “Panel Width (px)”.
Is the Scrollytelling Gutenberg block free?
Yes. Scrollytelling ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Scrollytelling 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: Layout, Default Background).
Related effects blocks
Sticky Scroll
Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Marquee / Announcement Bar
Scrolling announcement bar with pause on hover and accessibility support.
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Parallax Depth Cards
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Scrollytelling from the Gutenberg inserter.