Jupa – Blocknimations
Jupa Blocknimations adds animation controls directly to the blocks you already use (paragraph, image, columns, group, and more) — no new block, no extra markup. Pick from a curated shortlist or the full Animate.css catalog (97 animations, plus 4 custom “Reveal” wipes). On Enter (default): plays once
Jupa Blocknimations adds animation controls directly to the blocks you already use (paragraph, image, columns, group, and more) — no new block, no extra markup. Pick from a curated shortlist or the full Animate.css catalog (97 animations, plus 4 custom “Reveal” wipes).
- On Enter (default): plays once the first time a block scrolls into view, staggering blocks that enter together. Works in every browser.
- Scroll driven : ties the animation to scroll position via native CSS ( animation-timeline ), falling back to “On Enter” automatically where unsupported.
- Respects reduced motion : with the OS “reduce motion” setting, animated blocks render in their final state — no movement.
- Loads only where needed : pages without an animated block skip the animation CSS and script entirely.
No animation JS library is bundled — just a small IntersectionObserver (under 1KB) plus plain CSS. Animations are real Animate.css classes and CSS custom properties, so they’re easy to override from your own CSS (e.g. --animate-duration , --animate-distance , or any property with !important ).
A note on restraint: animation is a great touch, but overusing it or mixing too many effects tends to hurt more than it helps. That’s why the toolbar leads with a short, curated shortlist — the full catalog is one click away via “More Animations…” when you actually need it.
How to Use
- 01Select a supported block (paragraph, heading, image, gallery, group, columns, button, cover, video, and more).
- 02Three icons appear in its toolbar: Animation : the curated shortlist, or More Animations… for the full catalog.
- 03Delay : a fixed 200ms–3000ms delay, or leave on “None” for automatic staggering.
- 04Type : click to switch between On Enter and Scroll driven (hides Delay, which has no effect there).
- 05Preview on the front end — animations only run there, never in the editor.
Source Code
Full source, including build tools, is at https://github.com/jupa8712/jupa-blocknimations. The build/ folder is compiled from src/ via @wordpress/scripts — run npm install then npm run build to regenerate it.
