Jupa – Blocknimations

Description

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.

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).