> 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.
Ü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.
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
```
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`
* `slide-in-bck-center`
* `slide-in-blurred-bottom` beliebt
* `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 %}
Beispiel:
{% endtab %}
{% tab title="Cloud / Pro (< 5.7.0)" %}
### Scroll Overlay
Zum Aktivieren des Effekts verwende die Klasse `zen-scroll-overlay`
Beispiel:
{% endtab %}
{% endtabs %}
