> 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/styling/allgemein/animationen.md).
# 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.
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.
Beispiel: