Studio Editor: Eine Entrance-Animation hinzufügen

4 Min. Lesezeit
Das Hinzufügen einer Entrance-Animation zu einem Element ist eine großartige Möglichkeit, die Aufmerksamkeit der Besucher darauf zu lenken. Die Animation wird angezeigt, wenn das Element zum ersten Mal sichtbar wird, sodass sie sofort ins Auge fällt. Es gibt viele Arten, aus denen du wählen und die genauen Bedürfnisse deines Kunden anpassen kannst.
Beispiel für einen Abschnitt auf einer Live-Website, wobei jedes Element eine eigene Entrance-Animation hat
In diesem Artikel erfährst du mehr über folgende Themen:

Eine Entrance-Animation hinzufügen

Du kannst eine Entrance-Animation zu bestimmten Elementen und Abschnitten oder der Seite als Ganzes hinzufügen.

Um eine Entrance-Animation hinzuzufügen:

  1. Wähle das entsprechende Element aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird
  1. Klicke auf den Tab Animationen und Effekte .
  2. Klicke unter Entrance auf + Hinzufügen.
  3. Wähle eine Animation aus der Liste aus.
    Tipp: Fahre mit der Maus über Animationen, um eine Vorschau zu sehen.
  4. (Optional) Klicke unten auf Animation anpassen, um Einstellungen wie Richtung, Verzögerung und Dauer anzupassen.
GIF, das zeigt, dass beim Mouseover über Animationstypen eine Vorschau angezeigt wird

Eine Entrance-Animation anpassen

Nachdem du eine Animation ausgewählt hast, richte sie so ein, dass sie sich wie gewünscht verhält. Wähle, wie lange die Animation dauert, wann sie beginnt, welche Intensität sie hat und vieles mehr.

Um eine Entrance-Animation anzupassen:

  1. Wähle das entsprechende Element, den Abschnitt oder die Seite aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird
  1. Klicke auf den Tab Animationen und Effekte .
  2. Klicke auf die Animation, die du ändern möchtest.
  3. Klicke auf Animation anpassen, um die Einstellungen zu ändern:
    • Richtung: Lege fest, aus welcher Richtung die Animation kommen soll.
      Tipp: Je nach Art der Animation legst du entweder die Richtung in Grad fest (z. B. 180 Grad) oder wähle eine Option aus einem Aufklappmenü (z. B. von links, im Uhrzeigersinn).
    • Dauer: Ändere die Dauer der Animation.
    • Verzögerung: Lege die Zeitspanne zwischen dem Laden der Seite und dem Start der Animation fest.
    • Easing: Wähle aus, wie langsam die Animation ein- und/oder auslaufen soll.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der ausgewählten Animation ab.
Screenshot, der die verfügbaren Einstellungen zeigt, wenn du eine Entrance-Animation anpasst

Eine Entrance-Animation entfernen

Du kannst eine Entrance-Animation jederzeit über das Inspektor-Panel entfernen.

Um eine Entrance-Animation zu entfernen:

  1. Wähle das entsprechende Element aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird
  1. Klicke auf den Tab Animationen und Effekte .
  2. Fahre mit der Maus über die Animation und klicke auf das Symbol für Weitere Aktionen .
  3. Klicke auf Entfernen.
Screenshot, der zeigt, wie du eine Animation im Inspektor auswählst und entfernst

War das hilfreich?

|