Jupa – Blocknimations Wordpress Plugin - Rating, Reviews, Demo & Download
Plugin 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
- Select a supported block (paragraph, heading, image, gallery, group, columns, button, cover, video, and more).
- 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).
- 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).
Screenshots
No screenshots provided
