Block editor

You can animate any block, including dynamic blocks like Latest Posts and blocks from other plugins.

Add an animation

  1. Select the block.
  2. In the block settings sidebar, open the AnimateGL panel.
  3. Pick an animation in Entrance Animation. The block plays it right away.
  4. Adjust the direction, duration, delay and easing.
  5. Save or publish the post.

The Entrance Animation list has these groups:

  • None: no animation.
  • Site default: the animation set in the Editor tab of the AnimateGL page. The timing controls don’t apply to it. See Animation Editor.
  • CSS: light animations that work on any block.
  • WebGL: animations that draw the block on a canvas. They look best on images.
  • My animations: your saved animations, in AnimateGL Pro. See My animations.

Controls

After you pick an animation, the panel shows Preview animation, Direction (or Variant), Animation duration (ms), Animation delay (ms) and Easing. The folded Distance and replay group holds Animation distance, Repeat and Lock to Scrollbar. See Animation settings for what each one does.

Click Preview animation to play the animation in the editor. If the block isn’t visible in the editor, it can’t be previewed, and the panel tells you so. Animations don’t play in the editor otherwise, and animated blocks are never hidden while you edit.

The toolbar button

Image and Featured Image blocks also have an AnimateGL button in the block toolbar, because their sidebar opens on the Content tab. The button opens the same controls.

Blocks inside a locked pattern or a block theme template have the toolbar button instead of the sidebar panel, because WordPress hides the panel there. On the pattern’s root block, the button animates the whole pattern. Blocks without a button, such as groups and columns, need Edit pattern first.

Add classes by hand

You can also type animation classes into Advanced > Additional CSS class(es). See CSS classes.

More with Pro

In the free plugin, the panel ends with a folded More with Pro row. Click Hide this to hide it for good. With AnimateGL Pro, the panel adds the Start, Groups and text, Devices and play once and Scroll and hover effects groups.