开发者 |
websevendev
skadev |
---|---|
更新时间 | 2025年10月1日 03:40 |
捐献地址: | 去捐款 |
PHP版本: | 8.1 及以上 |
WordPress版本: | 6.8 |
版权: | GPLv2 or later |
版权网址: | 版权信息 |
animations-for-blocks.zip
file.animations-for-blocks.zip
file to your WordPress installations ../wp-content/plugins
folder.In your selected block's inspector controls (block settings) open the "Animation" panel and select an animation. The current block should display a preview of the selected animation and further options related to that animation will become available below.
Animations for Blocks plugin works by using the Animate on Scroll (AOS) library that is mostly CSS-based with some JavaScript to handle initialization. The plugin adds attributes to block's root element that tell the AOS library how to animate it. Loading the necessary styles and scripts is also handled automatically by the plugin.
By default the plugin will not play animations for users that have the "prefers-reduced-motion" setting enabled for their device. This functionality can be turned off by enabling the "Ignore reduced motion preference" plugin option, how ever it's not recommended. Other users that don't have reduced motion preference enabled will still see the animations.
Since some elements are initially placed off-screen to then animate back to their normal position it can cause a scrollbar to appear. To prevent this the overflow should be hidden on one of the parent elements. Which element you should target is specific to your site. For example, you can try adding custom CSS: .wp-site-blocks { overflow: hidden; }
, but you have to make sure that this doesn't break any other features on your site that require overflow being visible.
It should work with normal blocks that render a valid WP Element that can utilize the blocks.getSaveContent.extraProps
filter as well as dynamic blocks that utilize a render_callback
. Third party blocks that do something unorthodox may not work.
Known unsupported blocks
The anfb_unsupported_blocks
filter can be used in your child theme's functions.php
file to disable block animation support.
add_filter('anfb_unsupported_blocks', function($blocks) {
$blocks[] = 'core/button';
return $blocks;
});
After disabling this plugin blocks with animations can become invalid. From there you can attempt to recover the block by clicking "Attempt Block Recovery" which should remove the custom animation attributes. If you don't want to risk blocks becoming invalid you need to disable all animations before disabling the plugin.
When none of the animated elements show up on your site it's possibly due to a JavaScript error preventing the initialization of AOS. Please open the Developer Tools (F12 on Chrome/Firefox) and look for any errors in the Console tab. You can contact support with the error message, include your site link if possible.
prefers-reduced-motion
enabled.@wordpress/*
packages.all
to screen and (prefers-reduced-motion: no-preference)
.Warning: Undefined array key "attrs"
when a parsed block doesn't have attributes.Incorrect use of <label for=FORM_ELEMENT>
.wp.components.ButtonGroup
.@wordpress/*
packages.@wordpress/*
packages.window.AOS
).@wordpress/*
packages.@wordpress/*
packages.block.json
for Animation container block.react-jsx-runtime
to keep the plugin working with WP < 6.6.@wordpress/*
packages.__unstableElementContext
being removed.@wordpress/*
packages.@wordpress/*
packages.WP_HTML_Tag_Processor
for adding HTML attributes.render_block
filter to apply animation attributes instead of overriding block's render_callback
.anfb_aos_attributes
filter that can modify attributes that are added to animated HTML elements.@wordpress/*
packages.once
and mirror
options detection in dynamic blocks.@wordpress/*
packages.@wordpress/*
packages.src
folder from plugin.