This feature is in AnimateGL Pro. See AnimateGL Pro.
By default, an animation plays when its element scrolls into view. A trigger starts it another way.
Pick a trigger
In the block editor, open the Start group in the AnimateGL panel. In Elementor, use Start in the AnimateGL section. The options are:
- On scrolling into view: the default.
- On page load: plays at load, as soon as any part of the element is in view.
- On click and On hover: with Element to watch (HTML anchor) empty, the animation plays on scrolling into view, then again on each click or hover on the block. With another block’s HTML anchor, the block stays hidden until that block is clicked or hovered.
- When a class is added: the block stays hidden until it has the class you enter in Class name, for example one a slider adds to the active slide.
- After another block finishes: a sequence. See below.
Give a block an HTML anchor in its Advanced panel. In Elementor, use the CSS ID in the Advanced tab, and enter it in Element ID or class name.
Sequences
With After another block finishes, pick the block in Block to wait for. The list shows the other animated blocks that have an HTML anchor. This block stays hidden until that block’s animation ends, then plays after its own delay. With a stagger or split text, it waits for the last part.
Chains work: B after A, then C after B.
If the block to wait for isn’t on the page or doesn’t animate there, the block plays on scrolling into view instead. It does the same in a loop of sequences, and for visitors who prefer reduced motion. Preview in the editor plays the block on its own.
Classes
agl-trigger-loadagl-trigger-clickandagl-trigger-hover, oragl-trigger-click-<id>andagl-trigger-hover-<id>to watch another elementagl-trigger-class-<name>agl-after-<id>
Without Pro, these classes do nothing and the element animates on scrolling into view, so nothing stays hidden.
Example
This paragraph waited for your click.