> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/sections-and-blocks/blocke/animationen.md).

# Animations

Animate blocks to enhance the user experience.

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="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fi7hXpHN652dx6qHgjTqZ%2FBildschirmfoto%202024-10-07%20um%2019.43.05.png?alt=media&amp;token=6683fa5d-f2b4-4e30-b3eb-1c099e67ecec" 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="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Ffo14M2yXmqLDtNJFRvin%2FBildschirmfoto%202024-10-07%20um%2019.44.08.png?alt=media&amp;token=90aa6ae2-9538-413c-a58d-a7b20ebc135f" 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>