Jupa - Blocknimations
| 开发者 | jupa8 |
|---|---|
| 更新时间 | 2026年9月19日 23:14 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
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.
--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.
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).
安装:
- Upload the plugin files to the
/wp-content/plugins/jupa-blocknimationsdirectory, or install through the WordPress plugins screen. - Activate through the "Plugins" screen.
屏幕截图:
常见问题:
Why don't I see the animation while editing?
By design — the editor always shows the block in its final state. Preview or view the page live to see it play.
Does this work with any block, including third-party ones?
It's enabled on the most common core blocks out of the box. It just needs the block to support a normal className attribute, which almost all do.
My block doesn't show the animation controls — what can I do?
Wrap it in a Group block and animate the group instead.
Does it slow down my site?
No. No extra animation library is loaded — just Animate.css's CSS and a script under 1KB.
更新日志:
1.0.0
- First stable release.
- Initial development release.