10 großartige Text-Animationen für Gifs und Sticker

Als ich während meiner Schulzeit meine ersten Webseiten erstellt habe, machte ich das direkt mit HTML. Und damals beinhaltete jede Anleitung zu HTML das <blink>-Element, welches den Text unaufhörlich blinken ließ. Gleichzeitig fehlte auch in keiner (guten) Anleitung die Aufforderung, dieses Element bloß nicht zu benutzen, weil es viel zu aufdringlich ist. Aber dennoch, bis Anfang der 2000er gab es viel zu viele Webseiten, die den blinkenden Text einsetzten. Und das war grauenhaft!

In meinem heutigen Beitrag blinkt und bewegt sich auch ziemlich viel. Das ist ausnahmsweise erlaubt, denn ich möchte dir meine liebsten Text-Animationen für Gifs und Sticker vorstellen. Diese verwende ich normalerweise nicht für Websites, sondern für Instagram-Stories. Außerdem kann ich die Gifs direkt in meinen Instagram-Filtern einbauen.

Instagram-Stories sind etwas ganz anderes als Websites. Sie dienen nicht zur Wissensvermittlung, sondern machen auf etwas aufmerksam. Daher vertragen sie auffälligere Elemente. Animationen sind hier auf jeden Fall eine gute Sache und sogar der blinkende Text ist erlaubt. Es gibt aber noch viel mehr Text-Animationen, sodass du dich in deinen Gifs nicht auf den blinkenden Text beschränken musst.

Einfache Animationen für Text-Gifs

Die Animationen in diesem Abschnitt kannst du sehr einfach selbst erstellen. Du benötigst dazu nur ein Grafikprogramm wie z.B. Canva oder Photoshop. Darin erstellst du mehrere Bilder, die anschließend im Gif nacheinander abgespielt werden. Die einzelnen Bilder einer Animation werden auch Frames genannt.

In Photoshop kannst du mehrere Einzelbilder direkt als Gif abspeichern. In anderen Programmen ist das oft nicht möglich. Dann empfehle ich dir das Online-Tool ezGIF. Dort kannst du mehrere Einzelbilder hochladen und in ein Gif umwandeln. Das Tool ist kostenlos und bietet viele Zusatzfunktionen.

Blinkendes Text-Gif "Link im Profil"

1. Blinkender Text

Obwohl ich in der Einleitung nicht gerade positiv davon gesprochen habe: Der blinkende Text darf in dieser Liste nicht fehlen. In der einfachsten Variante ist der Text abwechselnd sichtbar und unsichtbar. Dann besteht die Animation so wie mein Beispiel aus zwei Einzelbildern.

Alternativ kannst du das Blinken auch mit verschiedenen Textfarben umsetzen. Oder der Text bleibt statisch und du lässt stattdessen den Hintergrund blinken.

2. Positionswechsel

Animation mit Positionswechsel des Textes für das Wort "Guten Morgen"

Der Text verschiebt sich in jedem Einzelbild eine kleine Spur. Diese Bewegung kann zufällig sein oder z.B. ein Wippen imitieren. Das gleiche funktioniert auch mit der Größe des Textes. Damit kannst du beispielsweise den Text pulsieren lassen.

Um diese Animation zu erstellen, fange zunächst mit dem ersten Bild an. Kopiere dieses Bild und verschiebe den Text in die gewünschte Richtung. Danach kopierst du das nächste Bild und verschiebst wieder den Text. Viele dieser Animationen werden auch von Online-Programmen zum Erstellen von Gifs angeboten. Zum Beispiel kannst du direkt auf Giphy sehr einfache Animationen erstellen.

3. Einzelne Wörter

Text-Gif, bei dem die Wörter "link in bio" einzeln erscheinen

Im letzten Beispiel der einfachen Effekte erscheinen die einzelnen Wörter des Textes nacheinander. Sofern es sich um kurze Sätze  wie z.B. “Link in Bio” handelt, kannst du diese Animation händisch erstellen. In jedem Bild fügst du ein zusätzliches Wort hinzu. Kleiner Tipp: Die Gestaltung geht einfacher, wenn du mit dem gesamten Text anfängst und dann jeweils ein Wort wegnimmst.

Das gleiche Prinzip kannst du auch auf die einzelnen Buchstaben anwenden. Aber hier kommen schnell viele Einzelbilder zusammen. Solange alles gut geht, ist das kein großes Problem. Wenn du aber im Nachhinein einen Fehler am Anfang der Animation entdeckst, musst du nochmal von vorne anfangen. Daher empfehle ich händische Animationen nur bis maximal 10 Einzelbilder.

Komplexe Animationen für Text-Gifs

Die Animationen in diesem Abschnitt erfordern etwas mehr Arbeit und normalerweise auch ein Animationsprogramm wie z.B. After Effects. Diese Animationen bestehen aus ca. 50-100 Einzelbildern. Daher ist die manuelle Bearbeitung im Grafikprogramm nicht mehr sinnvoll.

Mit einem Animationsprogramm hast du den Vorteil, dass du nur einzelne Keyframes festlegen musst. Die Bilder dazwischen werden automatisch erstellt, sodass fließende Bewegungen entstehen. Außerdem ist es sehr einfach möglich, die Animation im Nachhinein zu verändern. Zusätzlich bietet After Effects sehr viele vordefinierte Animationen und Spezialeffekte.

4. Stroke-Effekt oder geschriebener Text

Der Text "neuer Blogpost" wird in einer Sprechblase wie von Hand geschrieben

Beim Stroke-Effekt erscheint der Text so, als ob er von Hand geschrieben wird. Daher eignet sich dieser Effekt besonders für Schriften die wie eine Handschrift aussehen. Der Effekt passt sehr gut zu comic-artigen Inhalten, deshalb habe ich ihn hier mit einer Sprechblase kombiniert.

7. Stretch-Effekt

Text-Animation mit Stretch-Effekt für den Text "jetzt anmelden"

Diesen Stretch-Effekt von SonduckFilm finde ich sehr gut gelungen. Er ist sehr auffällig, aber trotzdem elegant. Am Anfang der Animation wird der gesamte Text in die Höhe gedehnt. Danach werden nur die oberen und unteren Enden des Textes bis zum Rand ausgedehnt, sodass der Text selbst immer lesbar bleibt.

6. Overlay-Video im Text

Bei diesem Effekt wird die Schrift mit einem Video überlagert. Das ergibt eine sehr schöne, bunte Erscheinung. Damit bei der Wiederholung kein Sprung entsteht, kannst du das Video abwechselnd vor und zurück abspielen.

Bei diesem Effekt musst du aufpassen, dass die Dateigröße nicht zu groß wird. Reale Videoaufnahmen benötigen mehr Speicherplatz als großflächige Illustrationen. Da das Video durch die Schrift nur begrenzt sichtbar ist, kannst du eine starke Kompression anwenden.

miratrix-Schriftzug mit Video-Overlay

9. Wackelnde Buchstaben

Wiggle-Effekt mit wackelnden Buchstaben für den Text "But first, Coffee!"

Ein beliebter Effekt bei vielen Gif-Stickern sind wackelnde Buchstaben. Diese werden auch Wiggle-Effekt genannt. Jeder einzelne Buchstabe bewegt sich zufällig ein bisschen hin und her. In meinem Beispiel ist auch noch ein Glanzeffekt dabei, wie im Tutorial von Steven Van beschrieben.

4. Partikeleffekt

Der Text fügt sich aus unzähligen kleinen Partikeln zusammen. Die Partikel verändern zunächst ganz zufällig ihre Position. Mit der Zeit werden sie aber immer mehr zu dem Schriftzug hingezogen, bis sie schlussendlich an ihrer endgültigen Position stehen bleiben. Auf die gleiche Art und Weise fließt der Text danach wieder auseinander.

Der Text "Filter im Profil" wird aus vielen kleinen Partikeln zusammengesetzt.

8. Glitch-Effekt

Gif mit dem Text "watch now" mit Glitch-Effekt

Glitch-Effekte versehen Bilder mit Störungen. Zum Beispiel wie früher beim Analogfernsehen oder aber auch Pixelfehler, die bei Übertragungsstörungen entstehen. Als absichtlicher Look sind Glitch-Effekte immer wieder im Trend und können natürlich auch für Texte verwendet werden.

10. Shape Reveal: Über Form aufdecken

Zum Schluss habe ich noch einen schönen Effekt, bei dem der Text über eine Form aufgedeckt wird. In meinem Beispiel geschieht das mit einer Linie, die sich von oben nach unten bewegt. Sobald die Linie einen Punkt überquert, wird der Text sichtbar.

Der Text "Gif Workshop" wird über eine Linie aufgedeckt

Eigene Gifs lohnen sich

Wenn du oft Instagram-Stories postest, hast du mit eigenen Text-Gifs viele Vorteile:

  • Du kannst deine persönlichen Farben, Formen und Schriftarten verwenden.
  • Dein Stil spiegelt sich auch in den Animationen wieder: Magst du sehr auffällige Bewegungen oder passen dezentere Animationen besser zu deinem Branding?
  • Und nicht zuletzt kannst du auch den Text selbst festlegen und besser auf deine Zielgruppe anpassen.
  • Somit kannst du deine Stories ganz individuell gestalten.

Es gibt unzählige Möglichkeiten um Text zu animieren. Gerade für Instagram-Stories eignen sich Text-Animationen um auf deinen Call-to-Action aufmerksam zu machen. Natürlich sollst du es nicht übertreiben und auffällige Animationen für wichtige Dinge vorbehalten.

Dann bleibt noch die Frage, wie du die Animationen erstellst. Die einfachen Text-Animationen kannst du selbst mit einem Grafikprogramm oder einem Gif-Maker erstellen. Wenn du an einem der komplexen Effekte Gefallen gefunden hast und Unterstützung benötigst, kannst du dich gerne bei mir melden!

Schreibe einen Kommentar