> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/content/shopping-experiences/animations.md).
# Animations
## Animations
The shopping experience scroll animations are triggered when the page is scrolled. This allows the content to be displayed in an animated manner.
{% tabs %}
{% tab title="Pro (>= 5.7.0)" %}
Select the **block (1)** or section and open the **Animations & Effects (2)** area. Select the desired animation from the **Animation type (2)** list.
The **Advanced Settings (1)** opens a window with further settings. If these are not configured, the d[efault values from the theme configuration](/en/styling/general/animations.md#scroll-animation) apply.
The **Duration (2)** specifies how long the animation lasts in seconds. The **Delay (3)** describes the time until the animation starts. So, if an element reaches the visible area by scrolling, the animation waits another 0.25 seconds before starting. The **Offset (4)** is the distance in pixels that determines how far the element must be from the bottom of the screen before the animation is triggered. **Play only once (5)** ensures that the animation plays only once; otherwise, the animation plays every time the element re-enters the viewport.
The animations are triggered when the element moves into the viewport by the visitor scrolling.
{% endtab %}
{% tab title="Cloud / Pro (< 5.7.0)" %}
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`
{% endtab %}
{% endtabs %}
### Scroll Overlay
{% tabs %}
{% tab title="Pro (>= 5.7.0)" %}
### Scroll Overlay
To do this, select a **block (1)** or section, open the **Animations & Effects (2)** tab and activate the **Scroll Overlay (3)** option.
{% hint style="warning" %}
Once **Scroll Overlay (1)** is activated, no animation can be selected, and vice versa. With Scroll Overlay enabled, the layer is fixed, so no entry animation would start.
{% endhint %}
Example:
{% endtab %}
{% tab title="Cloud / Pro (< 5.7.0)" %}
To initiate the effect add the class `zen-scroll-overlay` .
Example:
{% endtab %}
{% endtabs %}
