XeroWP
Jupa – Blocknimations

Jupa – Blocknimations

0/5 (0 ratings) — active installs Updated Sep 23, 2026
animationblock-editorCSS Animationgutenbergscroll animation
Download v1.1.0
Curated animation shortlist, plus custom reveals and the full catalog one click away.

Curated animation shortlist, plus custom reveals and the full catalog one click away.

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

  1. Select a supported block (paragraph, heading, image, gallery, group, columns, button, cover, video, and more).
  2. Three icons appear in its toolbar:
    • Animation: the curated shortlist, or More Animations… for the full catalog.
    • Delay: a fixed 200ms–3000ms delay, or leave on “None” for automatic staggering.
    • Type: click to switch between On Enter and Scroll driven (hides Delay, which has no effect there).
  3. Preview 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.

Credits

“Scroll down” icon (https://www.magnific.com/animated-icon/scroll-down_17905763) — Designed by Magnific (https://www.magnific.com).