Animationen auswählen

Wähle aus Dutzenden vordefinierten Keyframe-Animationen für die Ebenen deiner Banner.

Video-Tutorial: Banner in Figma animieren und als HTML exportieren

Dieses Video zeigt, wie du in Sekunden produktionsreife HTML-Banner aus Figma animierst und exportierst.

Animationen ​

Bannerify bringt Dutzende vordefinierte Keyframe-Animationen mit, die in 5 Kategorien gruppiert sind:

  • Eingänge
  • Ausgänge
  • Einfache Transformationen
  • Blickfänger
  • Hintergrundschwenks

Animationen mit geteiltem Text verwenden. Bannerify enthält außerdem eigene Animationen, die unterstützte Textebenen in Zeichen, Wörter oder Zeilen aufteilen. Unter Animationen mit geteiltem Text findest du die Einrichtungsschritte, die unterstützten Schriften und aktuelle Einschränkungen.

Native Figma-Motion-Animationen verwenden. Wähle für eine einzelne Ebene eine erkannte Animation aus der Gruppe Figma Motion oder wähle im Eingangsmenü Batch Layer Actions die Option Apply Each Layer's Figma Motion. Sobald Motion auf mindestens eine Ebene angewendet ist, aktiviere über der Zeitleiste Mirror Figma Motion Timings, wenn du auch die nativen Timing-Versätze aus Figma übernehmen willst. Unter Figma-Motion-Animationen verwenden findest du alle Schritte zum Aktivieren und die unterstützten Eigenschaften.

Animationen von einer Ebene entfernen. Wenn eine Ebene gar keine Animation haben soll, wähle No Entry Animation und/oder No Exit Animation. Alternativ kannst du eine Figma-Ebene mit dem Präfix locked- umbenennen (zum Beispiel locked-RectangleBackground). Auch dann werden keine Animationen hinzugefügt, und das Auswahlfeld für Animationen in der Zeitleiste des Plugins wird deaktiviert.

Eingangsanimationen hinzufügen ​

Um eine Eingangsanimation festzulegen, fahr in der Zeitleiste von Bannerify mit der Maus über die Ebene, die du animieren willst, und klick auf das obere Auswahlfeld. Scroll durch die Liste der Animationen und klick auf einen Animationsnamen, um ihn auf deine Ebene anzuwenden. Die Bannervorschau aktualisiert sich sofort mit der neuen Animation.

Ausgangsanimationen hinzufügen ​

Ausgangsanimationen fügst du genauso hinzu wie Eingangsanimationen, nur klickst du statt auf das obere auf das untere Auswahlfeld, um eine Ausgangsanimation für deine Ebene auszuwählen.

Achte darauf, dass jede Ausgangsanimation einer Ebene erst nach dem Ende der Eingangsanimation beginnt. Sonst überschneiden sich beide Animationen und es kommt gleichzeitig zu widersprüchlichen Übergängen.