> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/texte-beim-scrollen-animieren.md).

# Texte beim Scrollen animieren

Mit einer Eingangsanimation erscheint ein Textelement erst dann mit einer sichtbaren Bewegung, wenn Besucherinnen und Besucher an die betreffende Stelle der Seite scrollen. Damit lenkst du Aufmerksamkeit auf eine Überschrift, eine kurze Erklärung oder eine Liste, ohne die Seite mit dauerhaft bewegten Elementen zu überladen.

Diese Funktion eignet sich für **Überschriften**, **Unterüberschriften**, **Absätze** und **Aufzählungen**. Sie verändert nur die Darstellung beim Erscheinen – nicht den Inhalt, die Verlinkung oder die Reihenfolge der Seite.

## Wann eine Animation sinnvoll ist

Setze sie gezielt ein, wenn ein kurzer Text beim Lesen hervorgehoben werden soll:

* eine zentrale Aussage im ersten sichtbaren Bereich;
* drei klar getrennte Vorteile auf einer längeren Seite;
* ein Übergang zu einem wichtigen nächsten Schritt;
* eine kurze Liste, die erst nach der Einleitung in den Blick kommen soll.

Verzichte auf eine Animation, wenn der Text sofort und ohne jede Verzögerung erfassbar sein muss. Dazu gehören zum Beispiel Hinweise zu Fristen, wichtige Bedingungen, Fehlermeldungen oder die einzige Erklärung für eine Handlung. Gute Bewegung unterstützt die Orientierung; sie ersetzt keine klare Textstruktur.

## Voraussetzungen

Bevor du beginnst, sollten diese Punkte erfüllt sein:

* Die gewünschte Website- oder Funnel-Seite ist bereits angelegt und du kannst sie im Editor bearbeiten.
* Der Text steht bereits in einem passenden Textelement. Prüfe zuerst Inhalt, Länge und Lesbarkeit.
* Du weißt, welcher Text betont werden soll. Wenn alles animiert ist, fällt nichts mehr auf.
* Du kannst die veröffentlichte Seite anschließend auf einem großen Bildschirm und auf einem Mobilgerät testen.

## Animation für einen Text einstellen

1. Öffne im Bereich **Websites und Funnels** die Seite, die du bearbeiten möchtest.
2. Wähle **Bearbeiten**, damit sich der Seiteneditor öffnet.
3. Klicke direkt auf die Überschrift, den Absatz oder die Aufzählung, die erscheinen soll.
4. Öffne rechts den Reiter **Animationen**.
5. Wähle bei **Eingangsanimation** eine passende Variante aus.
6. Beobachte die Vorschau direkt im Editor. Wechsle erst dann zu einer anderen Variante, wenn die Textaussage noch gut lesbar bleibt.
7. Speichere die Änderung.
8. Veröffentliche die Seite erst nach einem vollständigen Test.

Die Animation wird ausgelöst, sobald das Textelement beim Scrollen in den sichtbaren Bereich kommt. Sie ist daher besonders für Inhalte geeignet, die nicht bereits ganz oben auf der Seite stehen.

## Animationstypen verständlich auswählen

Die Animationsansicht gruppiert die Effekte nach ihrer Wirkung. In der geprüften Oberfläche sind unter anderem diese Gruppen sichtbar:

| Wirkung         | Geeignet für                                     | Praktische Empfehlung                                                                                |
| --------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| **Einblenden**  | ruhige Überschriften und erklärende Absätze      | Die sicherste Wahl, wenn die Bewegung kaum vom Lesen ablenken soll.                                  |
| **Verschieben** | kurze Aussagen oder klar getrennte Inhaltsblöcke | Wähle eine Richtung, die zur Leserichtung passt. Nutze nicht mehrere Richtungen direkt nacheinander. |
| **Springen**    | kurze, positiv formulierte Hinweise              | Nur sparsam verwenden. Bei langen Texten wirkt dieser Effekt schnell unruhig.                        |
| **Drehen**      | einzelne dekorative Aussagen                     | Für Kernbotschaften meist zu auffällig; vorher besonders sorgfältig testen.                          |
| **Vergrößern**  | kurze Überschriften oder eine einzelne Zahl      | Achte darauf, dass der Text nicht wie ein Hinweisfenster wirkt und trotzdem sofort lesbar bleibt.    |
| **Kippen**      | einzelne kreative Gestaltungselemente            | Setze diesen Effekt nur ein, wenn er den Inhalt nicht schwerer verständlich macht.                   |

In einzelnen Gruppen stehen zusätzlich Richtungen zur Auswahl, zum Beispiel oben, unten, links oder rechts. Wähle eine einfache, wiederkehrende Logik: Wenn Vorteile von unten eingeblendet werden, sollte nicht der nächste ähnliche Block plötzlich von rechts springen.

> **Tipp:** Beginne mit einem dezenten Einblenden. Erst wenn die Seite ohne Bewegung bereits gut funktioniert, lohnt sich ein auffälligerer Effekt.

## Wirkung im Editor und auf der veröffentlichten Seite prüfen

Die Vorschau im Editor zeigt dir die gewählte Bewegung direkt beim Bearbeiten. Sie ersetzt aber nicht den Test auf der veröffentlichten Seite, denn dort werden Seitenbreite, Scrollverhalten und benachbarte Elemente anders wahrgenommen.

Prüfe deshalb in dieser Reihenfolge:

1. Lies den Abschnitt im Editor ohne auf die Animation zu achten. Die Aussage muss auch ohne Effekt klar sein.
2. Vorschau die Animation und achte darauf, ob die Zeilen vollständig und ruhig erscheinen.
3. Speichere und veröffentliche die Seite.
4. Öffne die veröffentlichte Seite in einem neuen Browserfenster.
5. Scrolle langsam bis zum Textelement und prüfe, ob es erwartbar erscheint.
6. Wiederhole den Test auf einem Mobilgerät oder in der mobilen Vorschau.
7. Kontrolliere danach die Stelle direkt vor und nach dem animierten Text. Es dürfen keine leeren Flächen, überlappende Elemente oder schwer lesbare Übergänge entstehen.

## Praxisbeispiel: Drei Vorteile auf einer Leistungsseite

Eine Beratungsseite erklärt zunächst in einem kurzen Absatz, welches Problem sie löst. Danach folgen drei Vorteile: **klare Planung**, **weniger Nacharbeit** und **transparenter Fortschritt**.

1. Die Hauptüberschrift bleibt ohne Animation, damit die wichtigste Aussage sofort sichtbar ist.
2. Die drei kurzen Vorteile werden jeweils als eigene Zeile angelegt.
3. Für alle drei Zeilen wählst du dieselbe dezente Einblendung.
4. Du scollst auf der Testseite mehrfach vom Absatz zu den Vorteilen und prüfst, ob die Reihenfolge ruhig wirkt.
5. Auf dem Mobilgerät prüfst du zusätzlich, ob kein Vorteil beim Scrollen übersehen wird.

Das Ergebnis: Die Vorteile erhalten eine leichte Betonung, während die Seite weiterhin wie ein klarer, gut lesbarer Text aufgebaut ist.

## Grenzen und typische Fehler

* **Zu viele animierte Elemente:** Wenn fast jeder Absatz bewegt erscheint, verlieren Besucherinnen und Besucher die Orientierung. Entferne Animationen, bis nur noch die wichtigen Textstellen übrig bleiben.
* **Unpassende Textart gewählt:** Die Einstellung gehört zum ausgewählten Element. Klicke erneut genau auf den gewünschten Text, wenn sich die Änderung nicht dort zeigt, wo du sie erwartest.
* **Nur im Editor geprüft:** Speichern und veröffentlichen sind getrennte Schritte. Teste immer die veröffentlichte Seite.
* **Wichtiger Inhalt erscheint zu spät:** Eine Animation darf nie die einzige Möglichkeit sein, eine Information wahrzunehmen. Kürze den Effekt oder entferne ihn.
* **Unruhige Mischung aus Richtungen:** Unterschiedliche Bewegungen direkt nebeneinander wirken schnell zufällig. Verwende für ähnliche Textblöcke dieselbe ruhige Variante.
* **Mobilansicht übergangen:** Prüfe die Seite auf einem schmalen Bildschirm. Ist der Effekt dort störend oder lenkt vom Lesen ab, vereinfache die Gestaltung.

Für Animationen auf ganzen Bereichen, Zeilen oder Spalten findest du ergänzende Hinweise in [Animationen auf Website- und Funnel-Seiten gestalten](/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/animationen-auf-website-und-funnel-seiten-gestalten.md).


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/texte-beim-scrollen-animieren.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.