Studio Editor: Eine Loop-Animation hinzufügen

4 Min. Lesezeit
Verleihe deinem Design mit Animationen in Endlosschleife ein Gefühl von Bewegung. Du kannst jedem Element eine Loop-Animation hinzufügen, die den Besuchern auffällt. Einige sind subtiler. während andere die Aufmerksamkeit auf sich ziehen.
Beispiel für ein Textmaskenelement mit einer Loop-Animation auf einer Live-Website
In diesem Artikel erfährst du mehr über folgende Themen:
Tipp:
Wenn du eine Animation auf dem Desktop-Breakpoint hinzufügst, wird sie kaskadenartig zu den kleineren Breakpoints hinzugefügt. Du kannst jedoch für jeden Breakpoint eine andere Animation festlegen oder dieselbe Animation anpassen.

Eine Loop-Animation hinzufügen

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

Um eine Loop-Animation hinzuzufügen:

  1. Wähle das entsprechende Element oder den Abschnitt aus.
  2. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
  3. Klicke auf den Tab Interaktionen .
  4. Klicke unter Loop auf + Hinzufügen.
  5. Wähle eine Animation aus der Liste aus.
    Tipp: Fahre mit der Maus über Animationen, um eine Vorschau zu sehen.
GIF, das die verfügbaren Loop-Animationen zeigt und wie beim Mouseover eine Vorschau angezeigt wird

Eine Loop-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, stelle die Intensität ein, füge eine Verzögerung zwischen den Wiederholungen hinzu und vieles mehr.

Um eine Loop-Animation anzupassen:

  1. Wähle das entsprechende Element, den Abschnitt oder die Seite aus.
  2. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
  3. Klicke auf den Tab Interaktionen .
  4. Klicke auf die Animation, die du ändern möchtest.
  5. Klicke auf Animation anpassen, um die Einstellungen zu ändern:
    • Richtung: Wähle die Richtung, aus der die Animation kommen soll (z. B. von links, von oben).
    • Intensität: Gestalte diese Animation subtiler oder offensiver.
    • Dauer: Ändere die Dauer der Animation.
    • Verzögerung der Wiederholung: Füge eine Verzögerung (in Sekunden) zwischen den unendlichen Wiederholungen der Animation hinzu.
    • Easing: Wähle aus, wie langsam die Animation ein- und/oder auslaufen soll.
Hinweis:
Die verfügbaren Einstellungen hängen von der ausgewählten Animation ab.
Screenshot der verfügbaren Anpassungsoptionen für die Loop-Animation

Eine Loop-Animation entfernen

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

Um eine Loop-Animation zu entfernen:

  1. Wähle das entsprechende Element, den Abschnitt oder die Seite aus.
  2. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
  3. Klicke auf den Tab Interaktionen .
  4. Fahre mit der Maus über die Animation und klicke auf das Symbol für Weitere Aktionen .
  5. Klicke auf Entfernen.
Eine Loop-Animation aus dem Inspektor-Panel entfernen

War das hilfreich?

|