# Animations

Animations are an effective way to increase user engagement and enhance the visual appeal of your website. By using **animated blocks**, you can highlight content, improve the flow of reading, and create a dynamic user experience. Here, you'll learn how to animate blocks in the Shopping Experiences using the CMS Bundle.

{% hint style="info" %}
**What are animated blocks?**

Animated blocks are content that are activated by various motion effects during **page load** or **scrolling**. They not only give the website a modern aesthetic but also help to highlight important information and actions.
{% endhint %}

### How to Configure Animation Settings

1. **Select Block:**\
   Choose the block you want to animate and open the advanced block settings of the CMS Bundle.
2. **Configure Animations:**\
   Under **Animations**, you will find the settings that you can apply to the block.

<figure><img src="/files/OBgYRbZUSiKNUEU2oJ05" alt=""><figcaption></figcaption></figure>

### Basic Settings

<table><thead><tr><th width="223">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Animation Type</strong></td><td>The different types of animation (zoom, flip, fade, ...)</td></tr><tr><td><strong>Behavior</strong></td><td>The behavior determines the dynamics of the animation. For example, you can choose a fast start but a slower end for the animation.</td></tr></tbody></table>

### Advanced Animation Settings

When clicking on the button for advanced animation settings, a popup appears with additional configuration options.

<figure><img src="/files/NWd9q8NJnSYjrdxIUgwM" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="307">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Animation Display</strong></td><td>The general behavior of the animation</td></tr><tr><td><strong>Animation Duration</strong></td><td>How long it takes for the animation to fully complete (in milliseconds).</td></tr><tr><td><strong>Animation Delay</strong></td><td>Set the delay for the start of the animation in milliseconds.</td></tr><tr><td><strong>Anchor Point (Advanced)</strong></td><td>When the specified selector becomes visible, the block's animation will be triggered. This allows you to create interdependent content.</td></tr></tbody></table>


---

# Agent Instructions: 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://docs.rh-webdesign.com/cms-bundle/en/sections-and-blocks/blocke/animationen.md?ask=<question>
```

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.