> 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/animationen-auf-website-und-funnel-seiten-gestalten.md).

# Animationen auf Website- und Funnel-Seiten gestalten

Mit Animationen legst du fest, wie Inhalte auf einer Seite sichtbar werden. Richtig eingesetzt lenken sie den Blick zuerst auf eine Überschrift, dann auf die Erklärung und anschließend auf den nächsten Schritt. Sie ersetzen aber keine klare Seite: Wichtige Informationen und der Hauptbutton müssen auch ohne Bewegung sofort verständlich sein.

## Was du animieren kannst

Es gibt zwei sinnvolle Ebenen:

* **Einzelnes Element:** zum Beispiel eine Überschrift, ein Textabsatz, eine Aufzählung, ein Bild oder ein Button. Wähle diese Variante, wenn genau dieses Objekt Aufmerksamkeit bekommen soll.
* **Abschnitt, Zeile oder Spalte:** Damit bewegst du eine zusammengehörende Gruppe auf einmal. Das passt etwa zu einem Bereich aus Überschrift, Erklärung und Button.

Wenn du sowohl einen übergeordneten Bereich als auch ein Element darin animierst, wird erst der Bereich und danach das enthaltene Element abgespielt. Die Reihenfolge entsteht automatisch.

## Bevor du startest

Öffne die Website oder den Funnel, dessen Seite du ändern möchtest, im Seiteneditor. Plane zuerst, welches eine oder welche zwei Inhalte wirklich hervorgehoben werden sollen. Viele unterschiedliche Bewegungen machen eine Seite unruhig und erschweren das Lesen.

Für Layoutbereiche sind Animationen auf Mobilgeräten zunächst ausgeschaltet. Das ist beabsichtigt, damit die Seite auf dem Smartphone schnell und ruhig bleibt.

## Einzelnes Element animieren

1. Öffne **Websites und Leadgewinnung > Websites und Funnels** und wähle die passende Website oder den Funnel.
2. Öffne die gewünschte Seite und starte den Seiteneditor.
3. Klicke direkt auf das Element, das erscheinen soll, beispielsweise auf eine Überschrift, einen Text, ein Bild oder einen Button. Seine Einstellungen öffnen sich rechts.
4. Öffne den Tab **Animationen**.
5. Wähle bei **Eingangsanimation** einen Stil. Für Text stehen unter anderem Einblenden, Verschieben, Springen, Drehen und Vergrößern zur Auswahl.
6. Prüfe die Wirkung direkt im Editor. Erst wenn der Effekt zum Inhalt passt, übernimmst du ihn.
7. Öffne **Animation anpassen**, wenn du Zeitpunkt und Tempo genauer festlegen möchtest.
8. Speichere die Seite und veröffentliche sie. Prüfe danach die echte Seite, nicht nur die Vorschau im Editor.

Eine Eingangsanimation startet, wenn das Objekt beim Scrollen in den sichtbaren Bereich kommt. Pro einzelnem Element ist eine Animation vorgesehen. Für einen abgestimmten Ablauf verteilst du verschiedene Effekte lieber auf mehrere Objekte, statt mehrere Effekte auf dasselbe Objekt zu legen.

## Ganze Abschnitte, Zeilen und Spalten animieren

Diese Variante ist besonders hilfreich, wenn mehrere Inhalte als eine Einheit auftreten sollen.

1. Klicke auf dem Arbeitsbereich den gewünschten **Abschnitt**, die **Zeile** oder die **Spalte** an. Der ausgewählte Bereich wird mit einem Rahmen und Anfasspunkten markiert.
2. Öffne rechts **Animationen** und dann **Eingangsanimation**.
3. Fahre mit der Maus über eine Animationskarte. Der Effekt wird sofort auf dem ausgewählten Bereich vorgeschaut und verschwindet wieder, wenn du die Karte verlässt.
4. Klicke den passenden Stil an, um ihn zuzuweisen.
5. Passe bei Bedarf die Einstellungen an und speichere anschließend die Seite.

Für Layoutbereiche stehen je nach Auswahl unter anderem diese Bewegungsgruppen bereit:

| Gruppe                  | Sichtbare Wirkung                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------- |
| **Einblenden**          | Der Bereich wird sichtbar und kann dabei aus einer Richtung erscheinen.                                   |
| **Verschieben**         | Der Bereich gleitet von oben, unten, links oder rechts an seine Position.                                 |
| **Springen**            | Der Bereich kommt mit einer federnden Bewegung an.                                                        |
| **Umklappen**           | Der Bereich dreht sich um eine waagerechte oder senkrechte Achse.                                         |
| **Drehen**              | Der Bereich dreht sich beim Erscheinen.                                                                   |
| **Vergrößern**          | Der Bereich wächst aus einer kleineren Größe in seine normale Größe.                                      |
| **Schnelle Bewegung**   | Der Bereich kommt mit einer dynamischen seitlichen Bewegung und Schrägstellung ins Bild.                  |
| **Dauerhafte Bewegung** | Leuchten, Wiegen oder Springen wiederholt sich nach dem Erscheinen. Setze das nur sehr zurückhaltend ein. |

## Dauer, Verzögerung, Größe und Bewegungsverlauf

Nachdem du einen Stil gewählt hast, öffnest du **Animation anpassen**. Diese vier Einstellungen bestimmen die Wirkung:

| Einstellung          | Möglicher Wert                                          | Wofür sie steht                                                                                                                 |
| -------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Dauer**            | 0,1 bis 3 Sekunden                                      | Wie lange die Bewegung bis zum Ende braucht. Für ruhige Inhalte reichen meist kurze Werte.                                      |
| **Verzögerung**      | 0 bis 5 Sekunden                                        | Wie lange vor dem Start gewartet wird. Bei einer ausdrücklich gesetzten Verzögerung bleibt das Element bis zum Start verborgen. |
| **Größe**            | 0,5- bis 2-fach                                         | Die Startgröße bei Vergrößerungseffekten. Ein kleiner Unterschied wirkt meist professioneller als ein extremer Wert.            |
| **Bewegungsverlauf** | Gleichmäßig, langsam starten, langsam enden oder beides | Bestimmt, ob die Bewegung mit konstanter Geschwindigkeit läuft oder sanft beschleunigt und abbremst.                            |

Bei einem Layoutbereich kommt die eigene Verzögerung zusätzlich zur automatischen Reihenfolge hinzu. Verwende sie deshalb sparsam: Eine lange Wartezeit lässt Besucher vor wichtigen Informationen warten.

## Automatische Reihenfolge bei Layoutbereichen

Der Seiteneditor ordnet animierte Layoutbereiche automatisch von außen nach innen:

1. Zuerst erscheint der **Abschnitt**.
2. Danach erscheinen die enthaltenen **Zeilen**.
3. Anschließend erscheinen die **Spalten** innerhalb der jeweiligen Zeile.
4. Danach folgen die Inhalte innerhalb der Spalten.

Fügst du eine Zeile ein, löschst du einen Bereich oder verschiebst ihn, passt sich diese Reihenfolge automatisch an. Du musst die Verzögerungen nicht neu berechnen.

Wichtig: Ein Block, der in dieser Reihenfolge noch wartet, bleibt in seinem normalen Zustand sichtbar. Dadurch entstehen beim Scrollen keine leeren Flächen oder Flackern. Bereits abgespielte Blöcke bleiben ebenfalls sichtbar. Auch bestehende veröffentlichte Seiten nutzen die korrigierte Reihenfolge beim Laden der Seite, ohne dass du sie dafür erneut speichern musst.

## Mobilansicht bewusst festlegen

Für Abschnitte, Zeilen und Spalten sind Eingangsanimationen auf dem Smartphone und anderen Mobilgeräten standardmäßig aus. Der betreffende Bereich erscheint dort sofort.

Wenn der Effekt auf Mobilgeräten wirklich hilfreich ist:

1. Wähle den gewünschten Abschnitt, die Zeile oder die Spalte aus.
2. Öffne **Animationen**.
3. Aktiviere **Animationen auf Mobilgeräten aktivieren** für genau diesen Bereich.
4. Speichere und prüfe die veröffentlichte Seite auf einem echten Smartphone.

Die Einstellung gilt pro Bereich. Wenn ein übergeordneter Abschnitt auf Mobilgeräten animiert wird, eine enthaltene Zeile aber nicht, erscheint die Zeile sofort; die weitere Reihenfolge bleibt trotzdem korrekt.

## So prüfst du das Ergebnis

Prüfe die Seite in dieser Reihenfolge:

1. Sieh dir den Effekt im Editor an, bevor du ihn übernimmst.
2. Speichere und veröffentliche die Seite.
3. Öffne die veröffentlichte Seite in einem Desktop-Browser.
4. Scrolle von oben nach unten und prüfe, ob Überschrift, Erklärung und nächster Schritt in einer verständlichen Reihenfolge auftauchen.
5. Öffne dieselbe Seite auf einem Smartphone. Prüfe besonders, ob ein wichtiger Button ohne Warten sichtbar ist.
6. Nimm eine Bewegung wieder heraus oder verkürze sie, wenn sie vom Inhalt ablenkt.

## Praxisbeispiel: Terminseite ruhig aufbauen

Eine Terminseite soll Besucherinnen und Besucher zu einem Buchungsbutton führen:

1. Der obere Abschnitt erhält ein leichtes Einblenden.
2. Die Überschrift erscheint danach mit einer kurzen, dezenten Bewegung.
3. Die Erklärung bleibt ruhig oder bekommt nur eine sehr kurze Verzögerung.
4. Der Buchungsbutton bleibt gut sichtbar; er erhält höchstens eine unaufdringliche Eingangsanimation.
5. Auf dem Smartphone bleiben die Bereichsanimationen ausgeschaltet, damit der Button sofort erreichbar ist.
6. Nach dem Veröffentlichen prüft das Team die Reihenfolge auf Desktop und Smartphone.

So entsteht eine klare Führung, ohne dass die Seite wie eine Präsentation wirkt.

## Typische Fehler und Lösungen

| Beobachtung                                           | Wahrscheinliche Ursache                                                                                                                       | Was du tun kannst                                                                                |
| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| Der Effekt ist auf der echten Seite nicht zu sehen.   | Die Seite wurde nach der Änderung nicht gespeichert oder veröffentlicht, oder der Bereich ist noch nicht in den sichtbaren Bereich gescrollt. | Speichere, veröffentliche und teste die öffentliche Seite beim Scrollen.                         |
| Auf dem Smartphone erscheint keine Bereichsanimation. | Animationen für Layoutbereiche sind dort standardmäßig ausgeschaltet.                                                                         | Aktiviere sie nur für den betreffenden Bereich und prüfe die Seite auf einem echten Smartphone.  |
| Wichtige Inhalte kommen zu spät.                      | Die Verzögerung oder Dauer ist zu groß.                                                                                                       | Verkürze die Werte oder entferne die Verzögerung.                                                |
| Die Seite wirkt unruhig.                              | Zu viele Objekte oder dauerhaft wiederholte Effekte konkurrieren miteinander.                                                                 | Lasse nur die wichtigsten Inhalte animieren und streiche den Rest.                               |
| Zwischen Inhalten entstehen unerwartete Pausen.       | Für mehrere Layoutbereiche wurden zusätzlich lange Verzögerungen gesetzt.                                                                     | Verlasse dich auf die automatische Reihenfolge und verwende nur kurze zusätzliche Verzögerungen. |
| Du erwartest mehrere Effekte auf demselben Objekt.    | Pro einzelnem Element ist nur eine Animation vorgesehen.                                                                                      | Entscheide dich für einen passenden Effekt oder verteile die Bewegung auf mehrere Elemente.      |


---

# 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/animationen-auf-website-und-funnel-seiten-gestalten.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.