Title: Animations for Blocks
Author: ska-dev
Published: 24 de Agosto, 2021
Last modified: 1 de Decembro, 2025
---
Buscar plugins
# Animations for Blocks
Por [ska-dev](https://profiles.wordpress.org/skadev/)
[Descargar](https://downloads.wordpress.org/plugin/animations-for-blocks.1.2.5.zip)
[Vista previa](https://gl.wordpress.org/plugins/animations-for-blocks/?preview=1)
* [Detalles](https://gl.wordpress.org/plugins/animations-for-blocks/#description)
* [Valoracións](https://gl.wordpress.org/plugins/animations-for-blocks/#reviews)
* [Instalación](https://gl.wordpress.org/plugins/animations-for-blocks/#installation)
* [Desenvolvemento](https://gl.wordpress.org/plugins/animations-for-blocks/#developers)
[Soporte](https://wordpress.org/support/plugin/animations-for-blocks/)
## Descrición
Lightweight plugin that adds additional inspector controls to block editor blocks
that allow to animate the block once it becomes visible to the user during scrolling.
The controls can be used to select an animation type (fade, flip, slide, zoom),
variation (different directions), as well as delay, duration and more advanced settings.
Upon changing an option the animation can be immediately previewed in the editor.
[Demo](https://playground.wordpress.net/?plugin=animations-for-blocks&url=%2Fwp-admin%2Fpost.php%3Fpost%3D2%26action%3Dedit)
This plugin uses [AOS – Animate on scroll library](https://github.com/michalsnik/aos)
and adds its’ stylesheet (**2.8 kB**) and script (**5.2 kB**) to the front end as
well as a script that initializes the animations (**1.3 kB**).
## Capturas
* [[
* Adding an animation
* [[
* Animation controls
## Instalación
#### Install via admin dashboard
1. Go to your **WordPress admin dashboard -> Plugins**.
2. Click “Add New”.
3. Click “Upload Plugin”.
4. Select the `animations-for-blocks.zip` file.
5. Click “Install Now”.
6. Activate the plugin from **WordPress admin dashboard -> Plugins**.
#### Manual install via FTP upload
1. Upload the folder “animations-for-blocks” from `animations-for-blocks.zip` file
to your WordPress installations `../wp-content/plugins` folder.
2. Activate the plugin from **WordPress admin dashboard -> Plugins**.
## Preguntas frecuentes
### How do I add an animation?
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.
### How does it work?
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.
### Animations are not playing for me
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.
### Animations cause a horizontal scrollbar
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.
### Does it work for all blocks?
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](https://github.com/ska-dev-1/animations-for-blocks/blob/main/animations-for-blocks.php#L172-L175)
### Disable block support
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;
});
```
### What happens when I disable this plugin?
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.
### All the animated elements are invisible on the front end
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.
## Comentarios
### [Seems ok but duration does not work](https://wordpress.org/support/topic/seems-ok-but-duration-does-not-work/)
[cinek92](https://profiles.wordpress.org/cinek92/) 14 de Xaneiro, 2026
Does anybody knows why Duration does not work? I set 2 seconds or 3 seconds duration
of animation and it does not apply. It always fade with the same quick time
### [It worked and then it stopped](https://wordpress.org/support/topic/it-worked-and-then-it-stopped/)
[mariuszseo](https://profiles.wordpress.org/mariuszseo/) 17 de Novembro, 2025
Since version 1.2.3, the animations stopped working.I reverted back to version 1.2.2
and they work.I had to disable updates.
### [Very good](https://wordpress.org/support/topic/very-good-7575/)
[classikd](https://profiles.wordpress.org/classikd/) 20 de Abril, 2025
Excellent plugin merci
### [Better than css animations for gutenberg blocks](https://wordpress.org/support/topic/better-than-css-animations-for-gutenberg-blocks/)
[michaellili](https://profiles.wordpress.org/michaellili/) 1 de Abril, 2025
fr fr no cap
### [Awesome plugin!](https://wordpress.org/support/topic/awesome-plugin-7341/)
[andrewstarr](https://profiles.wordpress.org/andrewstarr/) 14 de Marzo, 2025
Makes animating your block content super easy. Love it! Support queries are answered
fantastically quick, so that’s another big plus point.
### [Amazing great plugin](https://wordpress.org/support/topic/amazing-great-plugin-6/)
[Tony Fitzpatrick80](https://profiles.wordpress.org/adambrown82/) 15 de Febreiro,
2025
Love this plugin that brought my static website to life. With these cool, easy-to-
configure animations, I can now compete with the big boys.
[ Ler todas as 27 opinións ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/)
## Colaboradores e desenvolvedores
“Animations for Blocks” é un software de código aberto. As seguintes persoas colaboraron
con este plugin.
Colaboradores
* [ ska-dev ](https://profiles.wordpress.org/skadev/)
“Animations for Blocks” foi traducido a 1 idioma. Grazas [aos desenvolvedores](https://translate.wordpress.org/projects/wp-plugins/animations-for-blocks/contributors)
polas súas contribucións.
[Traduce “Animations for Blocks” ao teu idioma.](https://translate.wordpress.org/projects/wp-plugins/animations-for-blocks)
### Interesado no desenvolvemento?
[Revisa o código](https://plugins.trac.wordpress.org/browser/animations-for-blocks/),
bota unha ollada ao[repositorio SVN](https://plugins.svn.wordpress.org/animations-for-blocks/),
ou subscríbete ao [log de desenvolvemento](https://plugins.trac.wordpress.org/log/animations-for-blocks/)
por [RSS](https://plugins.trac.wordpress.org/log/animations-for-blocks/?limit=100&mode=stop_on_copy&format=rss).
## Rexistro de cambios
#### 1.2.5
* Tested with WordPress 6.9.
* Update Lenis to 1.3.15.
* Update `@wordpress/*` packages.
#### 1.2.4
* Added a donate link on the plugin page – supporters get a 50% off coupon for
my brand new WordPress theme.
* Added notice that lets you know when your device has `prefers-reduced-motion`
enabled.
* Added plugin option “Ignore reduced motion preference”.
* Improved help text and FAQs.
* Update Lenis to 1.3.11.
* Update `@wordpress/*` packages.
* Tested with Gutenberg 21.7.0.
#### 1.2.3
* Change Animate on Scroll front end style media from `all` to `screen and (prefers-
reduced-motion: no-preference)`.
#### 1.2.2
* Fix `Warning: Undefined array key "attrs"` when a parsed block doesn’t have attributes.
* Fix `Incorrect use of