Video-Tutorial: Animationen mit geteiltem Text zu Figma-Bannern hinzufügen
Dieses Video zeigt, wie du Figma-Bannern mit dem Bannerify-Plugin Animationen mit geteiltem Text (nach Zeichen, Wort oder Zeile) hinzufügst.
Animationen mit geteiltem Text verwenden
Bannerify enthält eigene Split Text-Animationen für Textebenen. Damit animierst du Text nach Zeichen, Wörtern oder Zeilen, statt die ganze Ebene als einen Block zu bewegen.
So wendest du eine an:
- Füge deinem Banner eine normale Figma-Textebene hinzu.
- Lade die Ebene in deine Bannerify-Zeitleiste.
- Klick für diese Textebene auf das Auswahlfeld für die Eingangs- oder Ausgangsanimation.
- Öffne die Gruppe Split Text (GSAP Only).
- Wähle die gewünschte Animation mit geteiltem Text.
- Sieh dir das Ergebnis in Bannerify in der Vorschau an und passe bei Bedarf das Timing an.
Das sauberste Ergebnis erhältst du mit dem HTML-/GSAP-Export, wenn du die eigene Split-Text-Runtime von Bannerify nutzen willst.
Eingang und Ausgang kombinieren
Du kannst geteilten Text für die Eingangsanimation, die Ausgangsanimation oder für beide verwenden.
- Eingangs- und Ausgangsanimationen mit geteiltem Text stehen in den Auswahllisten in derselben Reihenfolge, damit du sie leicht kombinieren kannst.
- Die Namen der Ausgangsanimationen sind nach Möglichkeit gespiegelt, etwa Type On / Type Off, Rise / Fall und Reveal / Conceal.
- Das beste Ergebnis erzielst du, wenn deine Ausgangsanimation erst nach dem Ende der Eingangsanimation beginnt.
Unterstützte Textebenen
Geteilter Text ist nur verfügbar, wenn sich die ausgewählte Ebene zuverlässig als Rich-HTML-Text aufbereiten lässt.
Deine Textebene sollte:
- eine normale Textebene sein
- eine websichere Schrift, eine Google Font oder eine eigene Schrift mit direkter .woff- / .woff2-URL verwenden, die im Bereich für eigene Schriften von Bannerify hinterlegt ist
- keine Inline-Textlinks enthalten
- keine Listenformatierung haben
- keine Überschreibungen der Textformatierung haben
- nicht den scrollbaren Textmodus von Bannerify nutzen
Wenn du eine unterstützte Ebene später wieder auf eine nicht unterstützte Schrift oder Texteinstellung umstellst, behält Bannerify die gewählte Animation mit geteiltem Text auf der Ebene bei, markiert sie aber als nicht verfügbar, bis die Ebene die Voraussetzungen wieder erfüllt.
URLs für eigene Schriften
Wenn deine Textebene eine eigene Markenschrift nutzt, die weder als websichere Schrift noch als Google Font verfügbar ist, füge im Bereich für eigene Schriften von Bannerify eine direkte URL zu einer .woff- oder .woff2-Schriftdatei hinzu.
Die URL muss direkt auf die Schriftdatei selbst verweisen, etwa https://example.com/fonts/client-font.woff2. Eine normale Schriftseite, eine Download-Seite, eine CSS-Datei oder eine ZIP-Datei funktioniert in diesem Feld nicht.
Bannerify erkennt die eigenen Schriftschnitte, die in Split-Text-Ebenen verwendet werden, und listet jeden Schriftschnitt einmal auf. So fügst du die URL einmal pro Schriftschnitt ein, statt dieselbe URL jeder Textebene hinzuzufügen.
So öffnest du den Bereich für eigene Schriften:
- Wende eine Split-Text-Animation auf die Textebene mit der eigenen Schrift an.
- Klick in der Warnung unter der Bannervorschau auf Configure Fonts oder fahr in der Zeitleiste mit der Maus über die Textebene und klick auf Fonts.
- Füge für jeden aufgeführten Schriftschnitt die direkte .woff- oder .woff2-URL ein.
- Klick auf Done und sieh dir die Vorschau erneut an oder exportiere erneut.
Bannerify nutzt diese Schrift-URLs, um die Split-Text-Vorschau, Canvas- und Videoexporte sowie HTML-/GSAP-Exporte zu rendern. Bei HTML-/GSAP-Exporten fügt Bannerify außerdem automatisch die passende @font-face-Regel hinzu.
Du kannst Split-Text-Animationen für Ebenen mit eigener Schrift auch auswählen, bevor du die Schrift-URL hinzufügst. Bannerify zeigt dann unter der Bannervorschau eine Warnung an, bis eine gültige .woff- oder .woff2-URL hinterlegt ist.
Wenn du früher eine eigene Split-Text-Schrift-URL direkt an einer Textebene hinterlegt hast, verschiebt Bannerify diese gespeicherte URL automatisch in den neuen Bereich für eigene Schriften, sobald du ihn öffnest.
Wenn geteilter Text nicht verfügbar ist
Bannerify sperrt geteilten Text für Ebenen in jedem dieser Fälle:
- die ausgewählte Ebene ist keine Textebene
- die Ebene hat eine Formatüberschreibung
- Scrollable Text ist für diese Ebene aktiviert
- der Text enthält Inline-Links
- der Text ist als Liste formatiert
- Bannerify kann die Textebene nicht für die Split-Text-Vorschau aufbereiten
In diesem Fall zeigt Bannerify den Grund direkt in der Oberfläche des Plugins an, statt die Animation stillschweigend anzuwenden.
Fehlt nur eine gültige .woff- / .woff2-URL für eine eigene Schrift, lässt dich Bannerify die Split-Text-Animation trotzdem auswählen und zeigt eine Warnung an, statt die Option auszublenden.
Auf mehrere Ebenen anwenden, einfügen und Ziffernblock-Kürzel
Wenn du geteilten Text auf mehrere Ebenen gleichzeitig anwendest, gelten strengere Regeln als für normale Animationen.
- Jede ausgewählte Ebene muss eine Textebene sein
- Jede ausgewählte Textebene muss die Voraussetzungen für geteilten Text bereits erfüllen oder nur noch eine eigene .woff- / .woff2-Schrift-URL benötigen
Diese Regel gilt für:
- Anwenden auf mehrere Ebenen
- Kopieren und Einfügen von Animationen
- Anwenden per Ziffernblock-Kürzel
Wird auch nur eine ausgewählte Ebene nicht unterstützt, sperrt Bannerify diese Split-Text-Aktion und zeigt eine Warnung an.
Hinweise zu Vorschau und Export
Bannerify bezeichnet diese Gruppe als Split Text (GSAP Only), weil HTML-/GSAP-Exporte die eigene Split-Text-Runtime von Bannerify nutzen.
In aktuellen Versionen gilt:
- die Vorschau in Bannerify unterstützt geteilten Text
- aktuelle Exportwege mit Canvas-Rendering können geteilten Text ebenfalls rendern
- der HTML-/GSAP-Export ist weiterhin die beste Wahl, wenn du textbasierte Split-Animationen möglichst originalgetreu ausgeben willst
Die besten Ergebnisse
- Nutze geteilten Text vor allem für kurze Überschriften, Hinweise oder knappe Texte.
- Denk an bewusst gesetzte Zeilenumbrüche, denn zeilenbasierte Split-Animationen folgen dem gerenderten Textlayout.
- Sieh dir die Animation vor dem Export in der endgültigen Bannergröße in der Vorschau an.