Skip to main content
Mit Animationen bringen Sie Bewegung in Ihre Elemente und machen Ihre Seite ansprechender und interaktiver. Sie ziehen Aufmerksamkeit auf sich, führen Nutzer und verbessern das Gesamterlebnis.

​
Wo Sie es finden

  1. Wählen Sie ein beliebiges Element aus (Schaltfläche, Bild, Text usw.)
  2. Wechseln Sie zum rechten Panel
  3. Öffnen Sie den Bereich Animation
  4. Klicken Sie auf + Add oder bearbeiten Sie eine bestehende Animation

​
Eine Animation auswählen

Im Animations-Panel finden Sie eine umfangreiche Bibliothek.
  • Sie können scrollen, um alle verfügbaren Optionen zu erkunden
  • Über die Suchleiste finden Sie schnell eine bestimmte Animation
Die Animationen sind außerdem in Kategorien gegliedert, etwa:
  • Attention Seekers
  • Entrances
👉 So finden Sie je nach Ziel leichter die passende Art von Animation
Image

​
Animations-Einstellungen

​
Trigger

Legt fest, wann die Animation abläuft:
  • On Load → läuft ab, wenn das Element erscheint
  • On Hover → läuft ab, wenn der Nutzer mit der Maus darüberfährt
  • On Click → läuft beim Klicken ab
  • On Viewport → läuft fortlaufend ab (sofern unterstützt)

​
Speed

  • Steuert, wie schnell die Animation abläuft

​
Delay

  • Fügt vor dem Start der Animation eine Pause ein

​
Repeat

  • Steuert, wie oft die Animation abgespielt wird

​
Beispiel

  • Animation: Fade In
  • Trigger: On Load
  • Speed: Normal
  • Delay: 0,3 s
  • Repeat: 1
👉 Ergebnis: Das Element erscheint beim Laden der Seite sanft.

​
Bewährte Vorgehensweisen

  • Halten Sie Animationen dezent und zweckmäßig
  • Vermeiden Sie zu viele Animationen gleichzeitig
  • Nutzen Sie Entrances, um Elemente sanft einzuführen
  • Setzen Sie Aufmerksamkeitsanimationen nur dort ein, wo sie nötig sind