# Animationen

Animationen sind eine effektive Möglichkeit, um das Engagement der Nutzer zu erhöhen und die visuelle Attraktivität deiner Webseite zu steigern. Durch **animierte Blöcke** kannst du Inhalte hervorheben, den Lesefluss fördern und eine dynamische Benutzererfahrung schaffen. Hier erfährst du, wie du Blöcke der Erlebniswelten mit Hilfe des CMS Bundles animieren kannst.

{% hint style="info" %}
**Was sind animierte Blöcke überhaupt?**

Animierte Blöcke sind Inhalte, die durch verschiedene Bewegungseffekte beim **Laden der Seite** oder **beim Scrollen** aktiviert werden. Sie verleihen der Webseite nicht nur eine moderne Ästhetik, sondern helfen auch, wichtige Informationen und Aktionen hervorzuheben.
{% endhint %}

### So setzt du die Animationseinstellungen

1. **Block auswählen:** \
   Wähle den Block aus, den du animieren möchtest, und öffne die erweiterten Block-Einstellungen des CMS Bundles.
2. **Animationen einstellen:**\
   Unter **Animationen** findest du die Einstellungen, die du für den Block setzen kannst.

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2F8RlJKd8ChC19IfRGSKAx%2FBildschirmfoto%202024-10-05%20um%2018.00.45.png?alt=media&#x26;token=e9fbd1d2-3638-4395-9d0e-742fa6dce8aa" alt=""><figcaption></figcaption></figure>

### Grundlegende Einstellungen

<table><thead><tr><th width="223">Einstellung</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Animationstyp</strong></td><td>Die verschiedenen Typen der Animation (zoom, flip, fade, ...) </td></tr><tr><td><strong>Verhalten</strong></td><td>Das Verhalten bestimmt die dynamik der Animation. Bspw. kannst du einen schnellen Anfang, aber ein langsameres Ende der Animation wählen.</td></tr></tbody></table>

### Erweiterte Animationseinstellungen

Bei Klick auf den Button Erweiterte Animationseinstellungen erscheint ein Pupup mit weiteren Einstellungsmöglichkeiten.

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FtRA8xf6Zv6v3mnmXIMtr%2FBildschirmfoto%202024-10-05%20um%2018.06.44.png?alt=media&#x26;token=eb8db4a2-de78-4950-9a42-e89cf29209b7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="307">Einstellung</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Darstellung der Animation</strong></td><td>Das generelle Verhalten der Animation</td></tr><tr><td><strong>Dauer der Animation</strong></td><td>So lange dauert es, bis die Animation vollständig durchlaufen ist (in Millisekunden).</td></tr><tr><td><strong>Verzögerung bis zur Animation</strong></td><td>Hier stellst du die Verzögerung des Starts der Animation in Millisekunden ein.</td></tr><tr><td><strong>Ankerpunkt (Erweitert)</strong></td><td>Wenn der eingetragene Selektor sichtbar ist, wird die Animation des Blocks ausgeführt. So kannst du Ihnalte voneinander abhängig machen.</td></tr></tbody></table>