# Animations
The animation classes are inserted into the **CSS classes (2)** field of the **block (1)** in the layout settings.
Example:
```
zen-animate slide-in-blurred-bottom
```
The animations are triggered when the element moves into the viewing area of the so-called viewport by scrolling.
### Scroll-Animation
To initiate an animation add the class `zen-animate` in conjunction with any of the following pre-made animation classes:
* `fade-in`
* `fade-in-top`
* `fade-in-bottom`
* `fade-in-fwd`
* `slide-in-top`
* `slide-in-right`
* `slide-in-bottom`
* `slide-in-left`
* `slide-in-blurred-top`
* `slide-in-bck-center`
* `slide-in-blurred-bottom` popular
* `puff-in-center`
* `flip-in-hor-top`
* `flip-in-hor-bottom`
* `swing-in-bottom-fwd`
* `bounce-in-bottom`
* `scale-in-center`
### Scroll-Overlay / Parallax Animation
To initiate an animation add the class `zen-scroll-overlay` .
Example:
