Stagger and text split

This feature is in AnimateGL Pro. See AnimateGL Pro.

Stagger plays a block’s inner blocks one after another. Text split plays each word or letter on its own.

Stagger

In the block editor, open the Groups and text group in the AnimateGL panel and set Stagger inner blocks (ms). The inner blocks (columns, images, list items, posts) animate this many milliseconds apart, instead of the whole block. 0 turns it off.

In Elementor, use Stagger inner elements (ms).

Text split

Set Split text to Words or Letters. It is only offered for CSS animations. The step between words or letters is the stagger value. Without one, it is 60 ms for words and 30 ms for letters.

In Elementor, use Split text (CSS animations).

Text that contains a link, a button or a form field isn’t split. A split heading keeps its text for screen readers.

With triggers and sequences

A trigger on the block plays all its parts. A sequence that waits for a staggered or split block waits for its last part. See Triggers and sequences.

Classes

• agl-stagger-<ms>, for example agl-stagger-120
• agl-split-words and agl-split-letters

agl agl-slideCSSUp agl-split-words agl-stagger-90

Without Pro, the element animates as a whole.

Example

Each word of this sentence slides up on its own.