Textanimationen für Social: vier Stile, die funktionieren

Für Social-Posts erledigen vier Textanimationen fast alles: Aufsteigen (Wörter schweben nach oben und blenden ein, ruhig und hochwertig), Aufploppen (Wörter skalieren mit kleinem Federn herein, kurz und laut), Wischen (eine Zeile wird von einer Seite her enthüllt, wie ein Vorhang) und Schreibmaschine (Buchstaben erscheinen einzeln, als würde gerade geschrieben). Passe den Stil zur Botschaft an, halte jeden Auftritt unter etwa drei Vierteln einer Sekunde und halte die Wörter dann lange genug still, um sie zweimal zu lesen. Nutze einen Stil pro Post. Das ist das meiste vom Handwerk.

Die vier Textanimationen im Überblick

Aufsteigen: der sichere, hochwertige Standard

Aufsteigen bewegt jede Zeile ein kurzes Stück nach oben, während sie einblendet, und lässt sie dann zur Ruhe kommen. Weil die Bewegung klein ist und abbremst, liest das Auge die Wörter fast, sobald sie erscheinen. Es ist der richtige Standard für Marken, die ruhig wirken wollen: Hotels, Studios, Hautpflege, Architektur, Beratungen.

Staffle Zeilen um etwa 100 bis 150 Millisekunden, sodass sie kaskadieren. Staffle Wörter nur bei sehr kurzen Zeilen; Buchstaben mit Aufsteigen zu staffeln wirkt fahrig.

Aufploppen: für kurze Wörter, die landen sollen

Aufploppen skaliert ein Wort aus leicht kleinerer Größe hoch, schießt ein wenig über und kommt zur Ruhe. Es hat Energie und passt zu Wörtern, die treffen sollen: ein Preis, ein Prozentwert, „Ausverkauft“, „Heute Abend“, „Letzter Tag“. Bei langen Sätzen scheitert es, sie wackeln, statt zu landen.

Wischen: eine Schlagzeile wie einen Vorhang enthüllen

Wischen deckt eine Zeile von einem Rand zum anderen auf, sodass die Wörter in Leserichtung erscheinen, ohne sich zu bewegen. Es wirkt bedacht und filmisch, und weil die Buchstaben selbst an Ort und Stelle bleiben, ist es einer der am besten lesbaren Auftritte. Nutze es für Schlagzeilen, für eine „Vorher“-Zeile, die weggewischt wird, um ein „Nachher“ zu enthüllen, oder für einen Namen, der am Ende eines Videos enthüllt wird.

Wische in Leserichtung: von links nach rechts im Deutschen und in den meisten europäischen Sprachen. Ein Wischen gegen die Leserichtung wirkt, als würde der Text weggenommen.

Schreibmaschine: Wörter, die im Moment geschrieben werden

Schreibmaschine enthüllt Buchstaben einzeln. Sie ist langsamer als die anderen drei, und genau das ist der Punkt: Sie lässt eine Zeile persönlich wirken, als schriebe jemand gerade an dich. Nutze sie für Fragen, kurze Zitate, Tipps und Blicke hinter die Kulissen. Halte die Zeile kurz, denn der ganze Satz muss zu Ende getippt sein, bevor man ihn lesen kann, und dann braucht er trotzdem noch ein Halten.

Die richtige Textanimation wählen

1. 1

   Von der Botschaft ausgehen

   Ruhige Neuigkeiten steigen auf. Dringende ploppen. Eine Enthüllung wischt. Eine persönliche Notiz wird getippt.

2. 2

   Die Wörter zählen

   Ein bis drei Wörter vertragen jeden Stil. Lange Zeilen funktionieren am besten mit Aufsteigen oder Wischen; meide Aufploppen und Schreibmaschine.

3. 3

   Einen Stil pro Post wählen

   Gemischte Auftritte in einem Frame wirken, als würde sich eine Vorlage aufspielen. Konsistenz lässt Bewegung nach Marke wirken.

4. 4

   Das Halten festlegen

   Wenn das letzte Wort zur Ruhe gekommen ist, halte den Frame lange genug, um zweimal zu lesen. Stories laufen automatisch weiter, das zählt also am meisten bei Instagram Stories.

5. 5

   Stumm am Handy ansehen

   So sehen es viele deiner Zuschauer. Ist eine Zeile schwer zu erfassen, mach sie langsamer oder streiche Wörter.

CSS-Textanimationen zum Kopieren

Auf einer Website brauchen dieselben vier Stile je ein paar Zeilen CSS. Halte sie kurz, lass sie einmal laufen und schalte sie für Menschen ab, die reduzierte Bewegung bevorzugen.

/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}

Die Kurven sind so wichtig wie die Dauer; Easing erklärt, warum Aufsteigen abbremsen und Aufploppen überschießen sollte. Zum weiteren Handwerk bewegter Schrift siehe kinetische Typografie.

Text animieren in Gradiently

Das Studio von Gradiently hat diese vier Textanimationen, Aufsteigen, Aufploppen, Wischen und Schreibmaschine, für jede Textebene, über einem Mark, das sich langsam hinter den Wörtern bewegen kann. Das Mark hält seine ruhigste Fläche unter dem Text, während es sich bewegt, sodass Zeilen während der gesamten Animation lesbar bleiben. Mit Pro exportierst du Stories und Reels als GIF oder, wo der Browser Aufnahme unterstützt, als MP4 oder WebM. Animierte Instagram-Stories und GIF oder MP4 helfen dir bei der Formatwahl.