

WP Block AnimationsWP Block Animations
Easily animate all Wordpress site-builder and Gutenberg blocks, including menus, images, covers, titles, paragraphs, groups, rows
WP Block Animations
Easily animate all Wordpress site-builder and Gutenberg blocks, including menus, images, covers, ...
Overview
Easily animate all WordPress site-builder and Gutenberg blocks, including menus, images, covers, titles, paragraphs, groups, rows etc.
Improve your site UX and create more engagement with over 100+ fast and creative animation combinations.
Features
- Unlimited animation combinations
- Trigger animation on page load, hover, click or scroll
- Full control of animation speed, iterations, delay, timing and direction
- Create sequential animations using delay to smoothly animate your website
- Easy setup – just click on the block and select the desired animation
- Fast – light code to improve performance
- Reliable – our CSS animations are supported on all browsers
- WordPress site-builder & Gutenberg editor full support
Pro Tips
- Use the “click” and “hover” triggers to animate UX elements and improve conversion.
- Use the “scrolled into page” trigger to smoothly animate your full site while scrolling.
- Use the “delay” and “iterations” options to sequentially animate different blocks in sync
- Use a “group” wrapper to apply multiple animations to a single block
Requirements
A version of Wordpress with Gutenberg, block editor or site editor support
Instructions
Easy to use
- Open site/Gutenberg editor
- Click on the block you wish to animate
- Navigate to the block settings section on the right
- Click on “select animation” and use the preview popup to select your desired animation
- Optional: use the different options to customize/tweak/sync your animations
- Tip: you can apply multiple animation to a block by wrapping it inside a group, and applying a second animation to the wrapping group
Information
Category | Plugins / WordPress / Interface Elements |
First release | 26 July 2023 |
Last update | 26 July 2023 |
Supported CMS | WooCommerce 5.x, WooCommerce 6.x, WordPress 5.8, WordPress 5.9 |
Files included | .php, .css, .html, Javascript .js |
Tags | wordpress, gallery, animation, plugin, Block, design, conversion, ux, engagement, gutenberg, animate, block editor, site editor, slide in, fade in |