# CSS classes

### 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

| Name     | CSS class            |
| -------- | -------------------- |
| Slide    | `agl agl-fadeCSS`    |
| Zoom In  | `agl agl-zoomInCSS`  |
| Zoom Out | `agl agl-zoomOutCSS` |
| Wipe     | `agl agl-wipeCSS`    |
| Fade     | `agl agl-fadeCSS`    |

#### WebGL animations

| Name    | CSS class         |
| ------- | ----------------- |
| 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`