FAIR

Federated and Independent Repositories

Discover, trust, install: FAIR 1.0 is here

Plugin Banner

Animations for Blocks

by ska-dev

Version: 1.2.4

Download
Description

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

This plugin uses AOS – Animate on scroll library 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).

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.
  1. Adding an animation

    Adding an animation

  2. Animation controls

    Animation controls

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

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.

Easy to use and looks great.

By fengyuan7558 (fengyuandasdsadas) on September 2, 2025

Simple and lightweight way to add smooth scroll animations.

Very good

By classikd on April 20, 2025

Excellent plugin merci

Better than css animations for gutenberg blocks

By michaellili on April 1, 2025

fr fr no cap

Awesome plugin!

By andrewstarr on March 14, 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

By Tony Fitzpatrick80 (adambrown82) on February 15, 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.

Great plugin

By Lovro Hrust (lovor) on January 25, 2025

I was considering building such plugin myself, but it is already made! Thanks to developers!
Please update compatibility, people will not install this if they don't see compatibility with newest WordPress

Simple, Effective, Does what it says on tha tin!

By terrycskn on August 17, 2024

Great small animation Plugin.
I discovered this via the Generate Press FB group and I am glad I did.
Very straightforward to use, and integrates well with GenerateBlocks.

I would love to see the ability to set duration and delay by directly typing in, rather than a slider, but not really a negative.

5 Stars all the way.

Fantastic plugin

By pagrob on August 14, 2024

This plugin does just what I was looking for and does it very well, I hope it stays that way.

Very easy to use!

By mellypetty on May 3, 2024

I could not set up the animation using any other plugin. However, with this plugin, I was able to set up animations very easily.
With other plugins, I had to change the animation settings screen from hidden to visible. This plugin always shows the setting screen and the setting items are selectable, which saves time and makes it easier to create a site.
It has helped improve the usability of the Full Site Editor for WordPress. Thank you very much.

Amazing plugin!

By Chris Ribal (chrisribal) on April 30, 2024

Finally an easy to use block animation plugin! Thank you so much.

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 <label for=FORM_ELEMENT>.
  • Replace deprecated wp.components.ButtonGroup.
  • Update Lenis to 1.3.8.
  • Update @wordpress/* packages.

1.2.1

  • WP 6.8.
  • Update Lenis to 1.2.3.
  • Update @wordpress/* packages.

1.2

  • Front end scripts are now deferred.
  • Lazyload assets option now defaults to true.
  • Added new animation – “Scale”, a subtle animation which starts from a slightly scaled up/down state with opacity 0 and transforms into its’ initial size while fading in.
  • Added new animation – “Default”. Plugin settings now allow to configure an animation that will be used for any block that has selected the “Default” animation.
  • Added new animation – “Inherit”. The “Animation container” block now has an option to become an “Animation provider”, in which case all the blocks nested inside of it that use the “Inherit” animation will use the animation of the provider block. The provider block can also stagger each subsequent animation by a specified amount.
  • Bundled Lenis – a lightweight smooth scroll library – can be enabled in plugin settings.
  • AOS is now exposed to window object on the front end (window.AOS).
  • Tested up to WordPress 6.7.1.
  • Requires WordPress 6.6.
  • Requires PHP 8.1.
  • Update @wordpress/* packages.

1.1.6

  • Tested up to WordPress 6.6.
  • Update @wordpress/* packages.
  • Use block.json for Animation container block.
  • Move block styles to separate stylesheet.
  • Fix label and value mix up in RangeControl.
  • Remove some defunct code.
  • Bundled react-jsx-runtime to keep the plugin working with WP < 6.6.

1.1.5

  • Tested up to WordPress 6.5.
  • Added option to choose where to display the animation controls – you can move them to the “Styles” tab or to “Advanced” inspector controls area.
  • Update @wordpress/* packages.

1.1.4

  • Accidentally a version.

1.1.3

  • Fix for crash with latest Gutenberg plugin due to __unstableElementContext being removed.
  • Update @wordpress/* packages.

1.1.2

  • Add option to disable automatic animation preview.
  • Add option to lazyload assets when an animated block is preset on the current page.
  • Update @wordpress/* packages.
  • Update screenshots.

1.1.1

  • Use WP_HTML_Tag_Processor for adding HTML attributes.
  • Blocks that render multiple root elements are no longer wrapped automatically. Use Animation container block to do it.
  • Move all PHP code to main file for simplicity.

1.1.0

  • Animation preview works in iframe-d block editors.
  • Rework controls.
  • Add ability to copy-paste animation settings.
  • Update Animation container block to API version 2.
  • Use render_block filter to apply animation attributes instead of overriding block’s render_callback.
  • Add anfb_aos_attributes filter that can modify attributes that are added to animated HTML elements.
  • Convert some code to typescript.
  • Update @wordpress/* packages.
  • Test with WordPress 6.2-RC1.

1.0.6

  • Fix once and mirror options detection in dynamic blocks.
  • Update @wordpress/* packages.
  • Test with WordPress 6.1.1.

1.0.5

  • Update @wordpress/* packages.
  • Test with WordPress 6.0.
  • Add GitHub link.
  • Remove src folder from plugin.

1.0.4

  • Update block anchor selector.

1.0.3

  • Use generated version number for AOS library.

1.0.2

  • Fix encoding for dynamic blocks.

1.0.1

  • Add more unsupported blocks.
  • Move Animation Container block to “Design” category.

1.0.0

  • Initial release.
  • Version:Version: 1.2.4
  • Active installs:Active installs: 10K
  • Last updated:Last updated: 1 week ago
  • Requires:Requires: 6.6
  • Tested:Tested: 6.8.3
Average rating:5 out of 5 stars.
  • Number of ratings: 26 ratings
  • Number of ratings: 0 ratings
  • Number of ratings: 0 ratings
  • Number of ratings: 0 ratings
  • Number of ratings: 0 ratings
Back to top