Warum Bewegung wirkt: Timing, Spacing und die 12 Prinzipien

Worum es geht

Scroll einmal bewusst durch deinen Instagram- oder TikTok-Feed und achte nur auf die Bewegung. Manche Clips fühlen sich sofort hochwertig an: Ein Logo schnellt herein, landet weich und federt kurz nach. Andere wirken wie eine Folienpräsentation aus dem Jahr 2005: Alles gleitet mit derselben Geschwindigkeit herein und bleibt ruckartig stehen. Der Unterschied liegt selten in der Software oder in teuren Effekten. Er liegt fast immer im Timing und im Spacing, also darin, wie lange eine Bewegung dauert und wie sie sich über die Zeit verteilt.

Genau dieses Gefühl für Bewegung lernst du in diesem Kurs. Du wirst Storyboards zeichnen, Kompositionen einrichten, Keyframes setzen, Text animieren und für jeden Kanal das passende Format ausgeben. Aber alles beginnt mit einer Frage: Warum wirkt eine Bewegung lebendig, und warum wirkt eine andere billig? In dieser Lektion lernst du die Grundprinzipien, nach denen Trickfilmzeichnerinnen und Motion Designer seit Jahrzehnten arbeiten, und du rechnest zum ersten Mal selbst nach, wie sich ein fallender Ball von Frame zu Frame bewegt.

Animation ist eine Illusion aus Einzelbildern

Ein Video ist eine schnelle Folge von Standbildern, den Frames. In der Schweiz arbeitest du meistens mit 25 Bildern pro Sekunde (fps). Zeigt jedes Bild ein Objekt ein Stück weiter rechts, sieht dein Gehirn eine Bewegung. Zwei Grössen bestimmen dabei alles:

• Timing: Wie viele Frames dauert eine Bewegung? 6 Frames (0.24 s) wirken schnell und knackig, 25 Frames (1 s) ruhig, 50 Frames (2 s) schon fast träge.
• Spacing: Wie weit bewegt sich das Objekt von einem Frame zum nächsten? Grosse Abstände bedeuten hohe Geschwindigkeit, kleine Abstände langsame Bewegung.

Eine Analogie: Stell dir vor, du fährst mit dem Velo von einer Ampel zur nächsten. Die Zeit zwischen den Ampeln ist das Timing. Ob du gleichmässig fährst oder zuerst kräftig in die Pedale trittst und vor der Ampel sanft bremst, ist das Spacing. Dieselbe Strecke in derselben Zeit kann sich also völlig unterschiedlich anfühlen.

In allen vier Zeilen legt das Objekt 50 Pixel in 5 Frames zurück. Das Timing ist identisch, nur das Spacing unterscheidet sich, und damit die ganze Wirkung.

Die 12 Animationsprinzipien in eigenen Worten

Zwei Zeichner aus den Disney-Studios, Frank Thomas und Ollie Johnston, haben in ihrem Buch «The Illusion of Life» (1981) zwölf Grundprinzipien beschrieben. Sie stammen aus dem Zeichentrickfilm, gelten aber genauso für ein animiertes Logo oder ein Icon auf einer Website. Hier sind sie in Alltagssprache, mit einem Beispiel aus dem Motion Design.

Für die Arbeit mit Logos, Text und Icons sind vor allem fünf Prinzipien entscheidend: Timing, Slow In und Slow Out, Antizipation, Follow Through und Squash and Stretch. Mit diesen fünf hebst du eine Animation bereits deutlich über das PowerPoint-Niveau.

Warum gerade diese Prinzipien wirken

Dein Gehirn hat ein Leben lang beobachtet, wie sich echte Dinge bewegen. Eine Tasse, die du über den Tisch schiebst, beschleunigt zuerst und bremst dann ab (Slow In und Slow Out). Ein Basketball verformt sich beim Aufprall (Squash). Bevor du springst, gehst du in die Knie (Antizipation). Wenn ein Hund stehen bleibt, schwingt der Schwanz nach (Follow Through). Bewegungen, die diesen Erfahrungen widersprechen, nimmst du sofort als künstlich wahr, auch wenn du nicht sagen kannst, warum.

Timing gibt Gewicht

Dieselbe Strecke in unterschiedlicher Zeit erzählt unterschiedliche Geschichten. Fällt ein Ballon in 40 Frames zu Boden, wirkt er leicht. Fällt ein Amboss dieselbe Strecke in 8 Frames, wirkt er schwer. Für Marken heisst das: Eine Bank animiert ruhiger und mit weichen Kurven (Vertrauen), ein Energydrink schnell und mit harten Stopps (Energie). Timing ist also nicht nur Technik, sondern Teil der Markensprache.

Schritt für Schritt: Ein Ball, der wirklich fällt

Du animierst einen Ball, der aus 400 px Höhe in 12 Frames auf den Boden fällt. Ein echter Ball wird durch die Schwerkraft immer schneller, also braucht es ein beschleunigendes Spacing (ease in). Bei gleichmässiger Beschleunigung wächst der zurückgelegte Weg mit dem Quadrat der Zeit.

Schritt 1: Formel festlegen. Der Weg nach Frame f ist y = 400 · (f / 12)². Bei f = 0 ist y = 0, bei f = 12 ist y = 400.

Schritt 2: Positionen berechnen (gerundet auf eine Stelle):

Schritt 3: Spacing prüfen. Zwischen Frame 0 und 1 bewegt sich der Ball nur 2.8 px, zwischen Frame 11 und 12 fast 64 px. Die Abstände wachsen, also beschleunigt der Ball. Genau so muss es sein.

Schritt 4: Stretch vor dem Aufprall. In Frame 11 und 12 ist der Ball sehr schnell. Du streckst ihn leicht in Fallrichtung: Skalierung 92 % in der Breite, 110 % in der Höhe. Das Auge liest das als Bewegungsunschärfe.

Schritt 5: Squash beim Aufprall. In Frame 13 und 14 liegt der Ball am Boden und wird gestaucht: 120 % breit, 80 % hoch. Achte darauf, dass das Volumen ungefähr gleich bleibt: 1.2 · 0.8 = 0.96, also fast 1.

Schritt 6: Rückprall. Ab Frame 15 springt der Ball wieder hoch, diesmal nur auf etwa 60 % der Ausgangshöhe und mit abbremsendem Spacing (ease out), weil die Schwerkraft ihn wieder verlangsamt. Die Form normalisiert sich über 3 Frames auf 100 %.

Das Spannende an diesem Beispiel: In der halben Zeit (Frame 6) hat der Ball erst einen Viertel des Weges geschafft. Wer das linear animiert, lässt den Ball bei Frame 6 schon auf halber Höhe sein, und genau das wirkt falsch.

Typische Fehler

1. Alles linear lassen. After Effects setzt neue Keyframes standardmässig linear. Wer nichts ändert, bekommt Förderband-Bewegungen. Korrektur: Bewusst entscheiden, wie jede Bewegung beschleunigt und bremst (mehr dazu in Lektion 5).
2. Alles gleichzeitig bewegen. Logo, Text, Hintergrund und Icons starten im selben Frame. Das Auge weiss nicht, wohin. Korrektur: Staging. Elemente um 3 bis 6 Frames versetzt starten und die Hauptsache zuerst zeigen.
3. Squash and Stretch ohne Volumen. Ein Ball wird 130 % breit, bleibt aber 100 % hoch und wirkt aufgeblasen. Korrektur: Breite und Höhe gegenläufig ändern, sodass das Produkt ungefähr 1 bleibt.
4. Zu wenig Übertreibung. Eine Antizipation von 1 % sieht niemand. Korrektur: deutlich übertreiben, auf dem Zielgerät prüfen, dann fein zurücknehmen.
5. Timing nach Gefühl am grossen Monitor. Am 27-Zoll-Bildschirm wirken Bewegungen langsamer als auf dem Smartphone, wo der Weg in Zentimetern kürzer ist. Korrektur: Vorschau immer auch auf dem Zielgerät anschauen.

Zusammenfassung

• Animation entsteht aus Einzelbildern, in der Schweiz meist 25 pro Sekunde.
• Timing ist die Dauer in Frames, Spacing die Verteilung der Wege auf die Frames.
• Gleichmässige Abstände wirken mechanisch, wachsende oder schrumpfende Abstände natürlich.
• Die 12 Animationsprinzipien beschreiben, wie echte Bewegung wirkt. Für Logos und Text zählen vor allem Timing, Slow In und Slow Out, Antizipation, Follow Through und Squash and Stretch.
• Timing gibt Gewicht und ist Teil der Markensprache.
• Bei Squash and Stretch bleibt das Volumen ungefähr gleich.