CSS classes

AnimateGL reads its settings from CSS classes. The block editor and Elementor write these classes for you. With any other theme or page builder, add them to the element yourself.

Class anatomy

agl agl-fadeCSSUp agl-in-duration-800 agl-in-delay-200
  • agl makes the element an AnimateGL element. It is always needed. On its own, it plays the site default animation.
  • agl-<animation><Direction> picks a preset, for example agl-fadeCSSUp or agl-bendLeft. The direction is Left, Right, Up or Down. Leave it out to play the animation centered.
  • agl-in-duration-<ms> sets the duration, for example agl-in-duration-1200.
  • agl-in-delay-<ms> sets the delay.
  • agl-in-easing-<name> sets the easing, for example agl-in-easing-easeOutExpo.
  • agl-in-distance-<number> scales how far the element moves. 1 is the default.
  • agl-in-repeat plays the animation each time the element scrolls into view.
  • agl-in-lockToScrollbar ties the animation to the scroll position.

Animation names

CSS animations: fadeCSS, zoomInCSS, zoomOutCSS, wipeCSS, slideCSS.

WebGL animations: fade, flip, slide, stretch, bend, peel, zoomIn, zoomOut.

The WebGL Fade animation is drawn with CSS. It looks the same and starts sooner. Add agl-webgl to draw it with WebGL.

The Animations tab of the AnimateGL page lists every preset with its classes and a Copy button.

The class builder

On the Animations tab, open the Class builder. Pick an animation, a duration, a delay and an easing, then click Copy classes. The builder also lists where to paste the classes in Divi, Beaver Builder, Bricks, Breakdance, Oxygen and WPBakery.

In HTML

<div class="agl agl-fadeCSSLeft">…</div>

Example

This paragraph fades in and up when it scrolls into view.

For developers

Add agl-manual to an element to make it wait. Call AnimateGL.play(element) to play it. Each entrance fires the agl-animation-start and agl-animation-end events on the element.