# Animationen

## Scroll-Animation

Die Scroll-Animationen animieren Elemente und Blöcke der Erlebniswelten werden beim Scrollen der Seite ausgelöst. Dabei werden die Inhalte durch eine Animation eingeblendet, sobald diese durch Scrollen in den sichtbaren Bereich eintreten.

{% hint style="info" %}
Zum Anwenden der Scroll Animationen folge unserer Doku zur [Erlebniswelten Animation](/content/erlebniswelten/erlebniswelt-animation.md).
{% endhint %}

Die **Dauer (1)** gibt an, wie lange die Animation in Sekunden dauert. Die **Verzögerung (2)** beschreibt die Dauer, bis die Animation beginnt. Erreicht ein Element also durch Scrollen den sichtbaren Bereich, wartet die Animation noch weitere 0,25 Sekunden bis die Animation beginnt.

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

Du kannst zusätzlich das **Produkt Listing animieren (3)**, dabei werden die einzelnen Produkt-Boxen im Listing nacheinander animiert eingeblendet.

## Erscheinungs-Animation

Die Erscheinungs-Animationen animiert die Inhalte von Menüs und Offcanvas Elementen, sobald diese durch den Nutzer geöffnet werden.

Mit der Einstellung **Elemente animieren (1)** kannst Du die Funktion aktivieren oder auf Wunsch auch ausschalten.

Die **Dauer (2)** gibt an, wie lange die Animation in Sekunden dauert. Die **Verzögerung (3)** beschreibt die Dauer, bis die Animation beginnt. Erreicht ein Element also durch Scrollen den sichtbaren Bereich, wartet die Animation noch weitere 0,15 Sekunden bis die Animation beginnt.

<figure><img src="/files/0Yb8UI0ZKv010OUPxGv3" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/6YJBU5byTjL3A4xQJmTY" alt=""><figcaption></figcaption></figure>


---

# 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://themedocs.zenit.design/styling/allgemein/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.
