To add scroll animations to Gutenberg blocks, install the free ExtenderX plugin, select any block, open the ExtenderX panel in the sidebar and choose an entrance preset such as fade in, slide up or zoom. It works on core blocks and third-party blocks, adds floating and 3D tilt effects, and can apply one reveal style site-wide.
What you can animate
ExtenderX adds six extensions to the sidebar of every registered block — no replacement blocks and no shortcodes:
| Extension | What it does | Typical use |
|---|---|---|
| Entrance Animation | Fade in, slide up, zoom, flip, bounce and more, once on scroll | Section reveals, cards, images |
| Floating Animation | Continuous gentle motion | Hero images, badges, promo cards |
| Tilt Animation | 3D tilt that follows the mouse | Product shots, pricing cards |
| Visibility Control | Hide a block on desktop, tablet or mobile | Separate mobile layouts |
| Wrapper Link | Make a whole block clickable | Cards and columns |
| Tooltip | Accessible hover tooltip on any block | Icons and feature lists |
All six are free.
Step by step
- Install and activate ExtenderX.
- Go to ExtenderX → Block Editor and check Entrance Animation is on (switch on Floating and Tilt too if you want them).
- Edit a page and select a block — a Group, Columns, Image, Heading, or a block from Kadence, Spectra, Stackable or another library.
- In the right sidebar, open the ExtenderX panel.
- Pick a preset, set duration, delay and easing.
- Publish and scroll down the page to see it.
Stagger a row of cards: give each card the same preset and increase the delay by 100–150 ms per card.
Animate the whole site at once
Configuring every block is slow on a big site. Site-Wide Animations (free, beta) sets one reveal style from the dashboard and applies it to your content on every page. You can limit it to certain block types, add stagger delays, and override it on a page or block in the editor.
How ExtenderX compares with other block animation plugins
| ExtenderX | Blocks Animation (Otter) | Animations for Blocks | Ghost Kit | |
|---|---|---|---|---|
| Entrance animations on any block | Free | Free | Free | Free |
| Floating (looping) animation | Free | — | — | Pro (loop animations) |
| Mouse tilt / mouse effects | Free (tilt) | — | — | Pro (mouse effects) |
| Scroll-linked parallax / scrub | Pro | — | — | Pro (scroll effects) |
| Site-wide reveal from one setting | Free (beta) | — | — | — |
| Visibility, wrapper link, tooltip | Free | — | — | Display extension (free) |
| Plus dark mode, sticky header, accessibility toolbar… | Yes | — | — | — |
Sources: Blocks Animation, Animations for Blocks, Ghost Kit, as of October 25, 2026. Disclosure: WPXERO makes ExtenderX (version 1.10.0).
If you only want entrance animations, any of these works. ExtenderX is worth it when you also want looping and tilt effects for free, a site-wide setting, or ExtenderX's other tools.
Pro: scroll-linked effects
Scroll-Linked Effects in ExtenderX Pro tie an element's motion to scroll position — parallax drift and scroll-progress scrub — and Motion Import / Export moves your animation setup between sites. Pro also adds smooth scrolling (Lenis), a preloader and a skeleton loading screen.
Keep animations tasteful
- Animate sections, not every paragraph. Too much motion makes a page tiring to read.
- Keep durations short — 400–800 ms for entrances.
- Don't animate above-the-fold content that visitors need to see straight away.
- Test with reduced motion on. ExtenderX honours the setting automatically.
ExtenderX also covers a free accessibility toolbar, dark mode and maintenance mode. For animated backgrounds rather than block motion, see Animation Kit.