> 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 %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themedocs.zenit.design/en/content/shopping-experiences/animations.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.