{"id":369378,"date":"2026-09-19T14:31:17","date_gmt":"2026-09-19T14:31:17","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/jupa-blocknimations\/"},"modified":"2026-09-19T15:14:56","modified_gmt":"2026-09-19T15:14:56","slug":"jupa-blocknimations","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/jupa-blocknimations\/","author":9696073,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.1","requires":"6.8","requires_php":"7.4","requires_plugins":null,"header_name":"Jupa - Blocknimations","header_author":"Jupa","header_description":"Lightweight scroll animations for any block. No animation JS library \u2014 powered by Animate.css, fully customizable via CSS.","assets_banners_color":"","last_updated":"2026-09-19 15:14:56","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/www.jupa.co\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":30,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"jupa8","date":"2026-09-19 15:14:56","revision":3703399}},"upgrade_notice":{"1.0.0":"<p>First stable release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.gif":{"filename":"icon-128x128.gif","revision":3703368,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3703368,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3703380,"resolution":"1","location":"assets","locale":"","width":1536,"height":840},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3703380,"resolution":"2","location":"assets","locale":"","width":1536,"height":840},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3703380,"resolution":"3","location":"assets","locale":"","width":1536,"height":840},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3703380,"resolution":"4","location":"assets","locale":"","width":1536,"height":840},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3703380,"resolution":"5","location":"assets","locale":"","width":1536,"height":840},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3703380,"resolution":"6","location":"assets","locale":"","width":1536,"height":840}},"screenshots":{"1":"Curated animation shortlist, plus custom reveals and the full catalog one click away.","2":"Fixed delay options, or leave it on auto-stagger.","3":"The Advance modal: full animation catalog and animation type in one place.","4":"The mouse icon marks a block set to Scroll driven.","5":"Full Animate.css catalog, grouped by category.","6":"One click toggles between animation types."}},"plugin_section":[],"plugin_tags":[785,148857,6756,148076,71952],"plugin_category":[50],"plugin_contributors":[213770],"plugin_business_model":[],"class_list":["post-369378","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-block-editor","plugin_tags-css-animation","plugin_tags-gutenberg","plugin_tags-scroll-animation","plugin_category-media","plugin_contributors-jupa8","plugin_committers-jupa8"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/icon-128x128.gif?rev=3703368","icon_2x":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/icon-256x256.gif?rev=3703368","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/screenshot-1.png?rev=3703380","caption":"Curated animation shortlist, plus custom reveals and the full catalog one click away."},{"src":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/screenshot-2.png?rev=3703380","caption":"Fixed delay options, or leave it on auto-stagger."},{"src":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/screenshot-3.png?rev=3703380","caption":"The Advance modal: full animation catalog and animation type in one place."},{"src":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/screenshot-4.png?rev=3703380","caption":"The mouse icon marks a block set to Scroll driven."},{"src":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/screenshot-5.png?rev=3703380","caption":"Full Animate.css catalog, grouped by category."},{"src":"https:\/\/ps.w.org\/jupa-blocknimations\/assets\/screenshot-6.png?rev=3703380","caption":"One click toggles between animation types."}],"raw_content":"<!--section=description-->\n<p>Jupa Blocknimations adds animation controls directly to the blocks you already use (paragraph, image, columns, group, and more) \u2014 no new block, no extra markup. Pick from a curated shortlist or the full Animate.css catalog (97 animations, plus 4 custom \"Reveal\" wipes).<\/p>\n\n<ul>\n<li><strong>On Enter<\/strong> (default): plays once the first time a block scrolls into view, staggering blocks that enter together. Works in every browser.<\/li>\n<li><strong>Scroll driven<\/strong>: ties the animation to scroll position via native CSS (<code>animation-timeline<\/code>), falling back to \"On Enter\" automatically where unsupported.<\/li>\n<\/ul>\n\n<p>No animation JS library is bundled \u2014 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. <code>--animate-duration<\/code>, <code>--animate-distance<\/code>, or any property with <code>!important<\/code>).<\/p>\n\n<p><strong>A note on restraint:<\/strong> 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 \u2014 the full catalog is one click away via \"More Animations\u2026\" when you actually need it.<\/p>\n\n<p>[youtube https:\/\/www.youtube.com\/watch?v=e2uARdOSeXQ]<\/p>\n\n<h4>How to Use<\/h4>\n\n<ol>\n<li>Select a supported block (paragraph, heading, image, gallery, group, columns, button, cover, video, and more).<\/li>\n<li>Three icons appear in its toolbar:\n\n<ul>\n<li><strong>Animation<\/strong>: the curated shortlist, or <strong>More Animations\u2026<\/strong> for the full catalog.<\/li>\n<li><strong>Delay<\/strong>: a fixed 200ms\u20133000ms delay, or leave on \"None\" for automatic staggering.<\/li>\n<li><strong>Type<\/strong>: click to switch between <strong>On Enter<\/strong> and <strong>Scroll driven<\/strong> (hides Delay, which has no effect there).<\/li>\n<\/ul><\/li>\n<li>Preview on the front end \u2014 animations only run there, never in the editor.<\/li>\n<\/ol>\n\n<h4>Source Code<\/h4>\n\n<p>Full source, including build tools, is at https:\/\/github.com\/jupa8712\/jupa-blocknimations. The <code>build\/<\/code> folder is compiled from <code>src\/<\/code> via <code>@wordpress\/scripts<\/code> \u2014 run <code>npm install<\/code> then <code>npm run build<\/code> to regenerate it.<\/p>\n\n<h4>Credits<\/h4>\n\n<p>\"Scroll down\" icon (https:\/\/www.magnific.com\/animated-icon\/scroll-down_17905763) \u2014 Designed by Magnific (https:\/\/www.magnific.com).<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/jupa-blocknimations<\/code> directory, or install through the WordPress plugins screen.<\/li>\n<li>Activate through the \"Plugins\" screen.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"why%20don%27t%20i%20see%20the%20animation%20while%20editing%3F\"><h3>Why don't I see the animation while editing?<\/h3><\/dt>\n<dd><p>By design \u2014 the editor always shows the block in its final state. Preview or view the page live to see it play.<\/p><\/dd>\n<dt id=\"does%20this%20work%20with%20any%20block%2C%20including%20third-party%20ones%3F\"><h3>Does this work with any block, including third-party ones?<\/h3><\/dt>\n<dd><p>It's enabled on the most common core blocks out of the box. It just needs the block to support a normal <code>className<\/code> attribute, which almost all do.<\/p><\/dd>\n<dt id=\"my%20block%20doesn%27t%20show%20the%20animation%20controls%20%E2%80%94%20what%20can%20i%20do%3F\"><h3>My block doesn't show the animation controls \u2014 what can I do?<\/h3><\/dt>\n<dd><p>Wrap it in a Group block and animate the group instead.<\/p><\/dd>\n<dt id=\"does%20it%20slow%20down%20my%20site%3F\"><h3>Does it slow down my site?<\/h3><\/dt>\n<dd><p>No. No extra animation library is loaded \u2014 just Animate.css's CSS and a script under 1KB.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First stable release.<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial development release.<\/li>\n<\/ul>","raw_excerpt":"Lightweight scroll animations for any block. No animation JS library \u2014 powered by Animate.css, fully customizable via CSS.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/369378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=369378"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jupa8"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=369378"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=369378"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=369378"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=369378"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=369378"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=369378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}