Animating WordPress Blocks with Effects

This is a part of the Ghost Kit Pro plugin.
Purchase the Pro plugin to access this and other advanced features.

Purchase Now

You animate WordPress blocks in Ghost Kit from the Effects panel in the block settings. Select a block, add an effect, and it runs on the front end. Reveal animations are in the free plugin. Scroll, mouse and loop effects are part of Ghost Kit Pro.

Available Tools

• Reveal

Pro tools:

• Mouse Hover
• Mouse Press
• Mouse Move
• Scroll
• Loop

Stagger inner blocks

Available in Ghost Kit Pro 3.8.0 and later.

Stagger reveals the inner blocks of a block one after another instead of the whole block at once. Each inner block plays the block’s own Reveal settings and Transition.

1. Select the block that holds the inner blocks, such as a Group or Columns block.
2. In the block settings, open Effects and add Reveal.
3. Turn on Stagger. The Delay between field appears.
4. Optional. Enter the seconds between one inner block and the next in Delay between. The default is 0.1, and the field takes 0 to 10.

Stagger appears on these blocks:

An inner block with effects of its own keeps them and is left out of the order. A block with no inner blocks reveals as a whole.

With Replay Animation on, only the reveal is staggered. When the block leaves the screen, its inner blocks hide together.

In Ghost Kit without Pro, the Pro Settings list under Reveal names this setting Animate Inner Blocks One by One.

Examples

Loop

Scroll

Reveal

Mouse

Enable in 3rd-party blocks

<?php
registerBlockType( 'my/block', {
    title: 'My block',
    supports: {
        ghostkit: {
            effects: true,
        }
    },
    ...
} );