CSS classes
Adding entrance animations
Other page builders or classic editor
If you don't use Elementor or Block editor, you can add AnimateGL animations directly via CSS classes.
Default Entrance Animation
Default entrance animation is added with class agl. The default animation can be adjusted in plugin admin page with live editor.
Entrance Animation Presets
There are many presets for entrance enimations, for example fade, slide, fadeCSS, slideCSS, zoomIn, wipe. Those presets are combination of translate, opacity, rotate and various shader efects. Those animations are added to element with class agl agl-${animationName} for example
agl agl-fade
agl agl-slide
agl agl-fadeCSS
agl agl-zoomInCSS
Available presets are
CSS animations
Slide
agl agl-fadeCSS
Zoom In
agl agl-zoomInCSS
Zoom Out
agl agl-zoomOutCSS
Wipe
agl agl-wipeCSS
Fade
agl agl-fadeCSS
WebGL animations
Fade
agl agl-fade
Flip
agl agl-flip
Slide
agl agl-slide
Stretch
agl agl-stretch
Bend
agl agl-bend
Peel
agl agl-peel
Zoom In
agl agl-zoom
Directions
Directions are Up, Down, Left, Right. Each animation has default direction. For example, default for slide is "Right".
Direction can be changed by adding it at the end of css class, for example
agl agl-slideLeft or agl agl-slideUp
All presets
agl agl-bend
agl agl-bendLeft
agl agl-bendRight
agl agl-bendUp
agl agl-bendDown
agl agl-fade
agl agl-fadeLeft
agl agl-fadeRight
agl agl-fadeUp
agl agl-fadeDown
agl agl-peel
agl agl-peelLeft
agl agl-peelRight
agl agl-peelUp
agl agl-peelDown
agl agl-flip
agl agl-flipUp
agl agl-flipDown
agl agl-flipLeft
agl agl-flipRight
agl agl-fadeBasic
agl agl-slide
agl agl-slideLeft
agl agl-slideRight
agl agl-slideUp
agl agl-slideDown
agl agl-stretch
agl agl-stretchLeft
agl agl-stretchRight
agl agl-stretchDown
agl agl-stretchUp
agl agl-zoomIn
agl agl-zoomInLeft
agl agl-zoomInRight
agl agl-zoomInUp
agl agl-zoomInDown
agl agl-fadeCSS
agl agl-fadeCSSLeft
agl agl-fadeCSSRight
agl agl-fadeCSSUp
agl agl-fadeCSSDown
agl agl-zoomInCSS
agl agl-zoomInCSSLeft
agl agl-zoomInCSSRight
agl agl-zoomInCSSUp
agl agl-zoomInCSSDown
agl agl-zoomOutCSS
agl agl-zoomOutCSSLeft
agl agl-zoomOutCSSRight
agl agl-zoomOutCSSUp
agl agl-zoomOutCSSDown
agl agl-wipeCSS
agl agl-wipeCSSLeft
agl agl-wipeCSSRight
agl agl-wipeCSSUp
agl agl-wipeCSSDown
agl agl-slideCSS
agl agl-slideCSSLeft
agl agl-slideCSSRight
agl agl-slideCSSUp
agl agl-slideCSSDown
Last updated