> 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/content/erlebniswelten/erlebniswelt-animation.md).

# Animation & Effekte

## Animationen

Die Erlebniswelten Scroll-Animationen werden beim Scrollen der Seite ausgelöst. Die Inhalte lassen sich so animiert einblenden.

{% tabs %}
{% tab title="Pro (>= 5.7.0)" %}
Wähle den **Block (1)** oder die Sektion aus und öffne den Bereich **Animationen & Effekte (2)**. Wähle aus der Liste **Animationstyp (2)** die gewünschte Animation aus.

![](/files/ntPg69edeTKczx1qLkN6)

Über die **Erweiterten Einstellungen (1)** öffnet sich ein Fenster mit weiteren Einstellungen. Werden diese nicht eingestellt, greifen die [Standard-Werte aus der Theme-Konfiguration](/styling/allgemein/animationen.md#scroll-animation). 

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,25 Sekunden bis die Animation beginnt. Als **Offset (4)** wird der Abstand in Pixel bezeichnet, wie weit das Element vom unteren Bildschirmrand entfernt sein muss, bis die Animation ausgelöst wird. **Nur einmal abspielen (5)** sorgt dafür, dass die Animation nur einmalig abgespielt wird, andernfalls wird die Animation immer abgespielt, wenn das Element wieder in den Sichtbereich (Viewport) eintritt.

<figure><img src="/files/4kh8At2KiOp8PQOiSnLM" alt=""><figcaption></figcaption></figure>

Die Animationen werden ausgelöst, wenn sich das Element durch Scrollen des Besuchers in den Sichtbereich des sogenannten Viewports bewegt.
{% endtab %}

{% tab title="Cloud / Pro (< 5.7.0)" %}
Die Animation wird in den Layout-Einstellungen in das Feld **CSS-Klassen (2)** des **Blocks (1)** eingefügt.

Beispiel:

```
zen-animate slide-in-blurred-bottom
```

![](/files/Fw6TnGLTCP0IDO612Lik)

Die Animationen werden ausgelöst, wenn sich das Element durch Scrollen des Besuchers in den Sichtbereich des sogenannten Viewports bewegt.

### Scroll-Animationen

Zum Einleiten einer Animation verwende die Klasse `zen-animate` in Verbindung mit einer der folgenden vorgefertigten Animationen:

* `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`&#x20;
* `slide-in-bck-center`
* `slide-in-blurred-bottom` <mark style="color:green;background-color:green;">beliebt</mark>&#x20;
* `puff-in-center`
* `flip-in-hor-top`
* `flip-in-hor-bottom`
* `swing-in-bottom-fwd`
* `bounce-in-bottom`
* `scale-in-center`
  {% endtab %}
  {% endtabs %}

## Effekte

**Scroll Overlay** ist weniger eine Animation, sondern eher ein Verhalten und kann gesondert gewählt werden. Man kann es mit dem Verhalten eines Parallaxeneffekts vergleichen.

{% tabs %}
{% tab title="Pro (>= 5.7.0)" %}

### Scroll Overlay

Wähle dazu einen **Block (1)** oder die Sektion aus, öffne den Reiter **Animationen & Effekte (2)** und aktiviere die Option **Scroll Overlay (3)**.

{% hint style="warning" %}
Sobald **Scroll Overlay (1)** aktiviert wird, kann keine Animation ausgewählt werden und umgekehrt. Beim Scroll Overlay wird die Eben fixiert, sodass keine Eintrittsanimation gestartet würde.
{% endhint %}

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

Beispiel:

<figure><img src="/files/Nt1q7yzdLVU014vAlztq" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Cloud / Pro (< 5.7.0)" %}

### Scroll Overlay

Zum Aktivieren des Effekts verwende die Klasse `zen-scroll-overlay`&#x20;

Beispiel:

<figure><img src="/files/Nt1q7yzdLVU014vAlztq" alt=""><figcaption></figcaption></figure>
{% 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/content/erlebniswelten/erlebniswelt-animation.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.