Each animation has the same settings in the block editor, in Elementor and as CSS classes.
When an animation plays
An animation plays when its element scrolls into view. By default that is once 70% of the element, or 200px of it, is visible. It plays once, the first time.
Direction
Each animation plays centered (Default) or from the left, right, top or bottom. Some animations, such as presets from the Fade Pack, have variants instead of directions. The block editor then labels the list Variant.
Duration
How long the animation plays, in milliseconds. The default is 1000. Class: agl-in-duration-<ms>.
Delay
How long the animation waits before it starts, in milliseconds. The default is 0. Class: agl-in-delay-<ms>.
To play elements one after another, give each a longer delay than the one before, for example 0, 150 and 300 ms. AnimateGL Pro can do this for you. See Stagger and text split.
Easing
How the animation speeds up and slows down. The block editor shows readable names with the easing’s name in brackets, for example Soft out (easeOutSine) or Overshoot (easeOutBack). Linear keeps a constant speed. Class: agl-in-easing-<name>.
Distance
Scales how far the element moves. 1 is the default, 0 doesn’t move it, and 2 moves it twice as far. Class: agl-in-distance-<number>.
Repeat
Plays the animation again each time the element scrolls into view. Class: agl-in-repeat.
Lock to scrollbar
The animation follows the scroll position instead of playing for a fixed time. As you scroll down, the element animates in until it reaches the middle of the viewport. Class: agl-in-lockToScrollbar.
Site default
Site default in the block editor, and Default in Elementor, use the animation set in the Editor tab of the AnimateGL page. An element with only the agl class uses it too. The timing settings above don’t apply to it. To change its timing, change it in the editor. See Animation Editor.