# Embellishing Shopping Experiences with CSS animations

ThemeWare® version 0.3.0 and higher provides you with an extensive selection of CSS animations to embellish your Shopping Experience. In the following we will explain how to activate and use the "CSS scroll animations" in 2 steps only.

<figure><img src="/files/ytyMm9VBrJrl2AFSNll5" alt=""><figcaption><p>Right: CSS scroll animation "Fade-in"</p></figcaption></figure>

{% hint style="success" %}
**Tip**: Application examples you will find on the starting pages of our [demoshops](https://demo.themeware.design/modern/en/).
{% endhint %}

***

## ThemeWare® CSS scroll animations

### 1. Activating animations

1. Open the administration of your shop
2. Switch to the Theme Management ("Contents" => "Themes") via the main navigation.)\
   **Note**: In the Shopware Cloud please find the section "Themes" directly in the main navigation.
3. Open your theme configuration
4. Switch in the Tab "Shopping Experiences" to the Block "All types"
5. In the Section "CSS Scroll Animations" you will find configuration fields for "CMS blocks" and "Headlines in CMS blocks"\
   ![](/files/M8meYGRK2MTE6mQ9JtVb)
6. Choose the desired animation for CMS blocks or the headlines in CMS blocks (optional).
7. Save this change in order to adopt it into the storefront

### 2. Applying animations

1. Switch via the main navigation to the Shopping Experiences Management ("Contents" => "Shopping Experiences")
2. Edit the desired Shopping Experience
3. Select the desired CMS block you wish to animate
4. Open the section "Layout" in the block settings on the right edge of the screen
5. Add the CSS class `twt-cms-animation` (several classes are separated by blanks)\
   ![](/files/Yj1yQ2KYQ3M3e4nS2eLj)
6. Save the Shopping Experience

The corresponding CMS block should now be animated with the desired animation. Repeat "Step 2" for all CMS blocks you wish to animate.

In case the change does not arrive in the storefront, please check whether the theme has been assigned to the appropriate sales channel. When making changes of this kind, be sure to clear the entire Shopware cache and the browser cache.

{% hint style="info" %}
**Note**: Do not use the CSS animation in CMS pages that are displayed in pop-ups or modals. There the animations will not work.
{% endhint %}

{% hint style="info" %}
**Note**: Do not use CSS animation in CMS blocks that contain pop-ups or modals. Otherwise, the modals may not work.
{% endhint %}


---

# 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://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/embellishing-shopping-experiences-with-css-animations.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.