Animationsprinzipien

Bewegungsprinzipien

Entscheide, wie sich etwas bewegen soll, damit es sich richtig anfühlt – unabhängig vom verwendeten Werkzeug. Diese Fähigkeit beantwortet Timing, Easing, Abstand, Gewicht und Rhythmus. Sie wählt keinen Technologie-Stack aus; sie liefert konkrete Zahlen (Dauern, Cubic-Bezier-Kurven, Staffelungsversätze, Federkonfigurationen), die bereit sind, an jede Implementierung übergeben zu werden.

Wann verwenden

• Bewegung wirkt steif, schwimmend, mechanisch, roboterhaft oder billig und benötigt eine Diagnose.
• Auswahl der Dauer, des Easing-Kurve und des Staffelungsversatzes eines Clips oder Übergangs.
• Überprüfung, ob Bewegung die physikalische Intuition respektiert (Gewicht, Nachlaufen, Bögen).
• Synchronisieren von Keyframes mit einem musikalischen Beat oder einem Schnittakzent.

Drei Säulen – kläre diese vor jeder Zahl

Jede einzelne Bewegung sollte drei Fragen beantworten, bevor du eine Dauer oder Kurve wählst. Überspringe sie und du erhältst technisch korrekte Bewegung, die sich wie nichts anfühlt. Dies sind das gemeinsame Vokabular, auf das sich der Rest der Sammlung bezieht.

Säule	Die Frage	Was sie antreibt
Emotionale Absicht	Was soll der Betrachter fühlen? (Freude, Ruhe, Dringlichkeit, Vertrauen, Eleganz)	Easing, Dauer, Amplitude/Überschwingen
Visuelle Erzählung	Was ist die Mikrogeschichte? Aufbau → Aktion → Auflösung	Sequenzierung, Inszenierung, was wann eintritt
Bewegungshandwerk	Wie machen wir es glaubwürdig?	Physik, sekundäre Bewegung, Bögen, Nachlaufen

Drei Bewegungsebenen – Tiefe, nicht Flachheit

Flache Bewegung = nur die Hauptsache bewegt sich. Glaubwürdige Bewegung verwendet drei Ebenen gleichzeitig:

• Primär – die Hauptaktion, der das Auge folgt (die Heldenbewegung).
• Sekundär – unterstützender Reichtum, der auf die primäre reagiert (ein Schatten, der sich verschiebt, ein Symbol, das sich leicht bewegt, ein Label, das sich spät setzt).
• Ambient – Hintergrundleben, das niemals Aufmerksamkeit erfordert (langsame Gradientenverschiebung, ein niederfrequenter Puls).

Die Bewertungsebene (motion-art-direction) nennt diese Held / Unterstützung / Textur – dieselben drei Ebenen, geordnet nach was Bewegung verdient. Primär≈Held, Sekundär≈Unterstützung, Ambient≈Textur.

Kernprinzipien

Easing ist der mit Abstand größte Hebel

Lineare Bewegung wirkt roboterhaft. Reserviere linear für kontinuierliche Schleifen (Spinner, Laufschrift, endloses Scrollen) nur. Alles, was das Auge als diskretes Ereignis wahrnimmt, benötigt Beschleunigung.

Passe die Kurve an die Aktion an:

• Eingang / Erscheinen -> ease-out (schneller Start, sanftes Einpendeln). Das Objekt kommt mit Energie an und verlangsamt sich in die Position. cubic-bezier(0.16, 1, 0.3, 1).
• Ausgang / Verschwinden -> ease-in (sanfter Start, schnelles Ende). Das Objekt beschleunigt weg. cubic-bezier(0.7, 0, 0.84, 0).
• Bewegen / Neu positionieren (bleibt auf dem Bildschirm) -> ease-in-out (symmetrisch). cubic-bezier(0.65, 0, 0.35, 1).
• Verspielt / Markenbezogen -> leichtes Überschwingen. cubic-bezier(0.34, 1.56, 0.64, 1) (die 1.56 drückt über 1,0 hinaus, erzeugt ein Überschwingen-und-Setzen, das sich wie „Gewicht“ anfühlt).

Faustregel: Das Auge verzeiht einen langsamen Start weit weniger als ein langsames Ende. Im Zweifelsfall in die Ruheposition ausbremsen.

Manuelles Easing (After Effects). Wenn du Keyframes von Hand setzt, anstatt eine Kurve zu liefern, gelten dieselben Prinzipien für den Graph-Editor: Forme das Geschwindigkeitsdiagramm so, dass die Enden gegen Null abflachen, und erhöhe den Einfluss der Verzögerung auf 80–90 % für einen schnellen Start und ein sanftes Einpendeln. F9 (Easy Ease) ist nur ein symmetrischer Ausgangspunkt von 33 % – mache ihn asymmetrisch. Siehe references/easing-graph-editor.md für Graph-Editor-Lesetechniken, Handle-/Einflusstechniken und Schritt-für-Schritt-Rezepte für Überschwingen, Vorlauf und Hüpfen (einschließlich eines abklingenden Hüpf-Ausdrucks).

Timing kommuniziert Gewicht und Wichtigkeit

Element	Dauer
Mikrointeraktion (Hover, Umschalter, Tipp-Feedback)	100-200ms
UI-Übergang (Panel, Modal, Seitenbereich)	200-400ms
Held / großes Element / Vollbild	400-800ms
Kamerabewegung (filmisch)	800-2000ms

Abstand und Größe skalieren die Dauer. Ein kleines Symbol, das sich 20px bewegt, und ein randloses Panel, das sich 800px bewegt, sollten NICHT dieselbe Dauer haben – das Panel benötigt mehr Zeit, sonst wirkt es schwerelos. Ein praktisches Skalieren: Behalte die wahrgenommene Geschwindigkeit ungefähr konstant, indem du die Dauer um ~30-50 % erhöhst, wenn sich der Abstand oder die Fläche ungefähr verdoppelt. Schwere Objekte starten langsam und überschwingen weniger; leichte Objekte schnappen und können hüpfen.

Abstand und Staffelung erzeugen Rhythmus

Enthülle eine Liste, ein Raster oder eine Gruppe niemals auf einmal – es wirkt wie ein einzelnes flaches Ereignis. Staffele den Start jedes Kindes.

• Listen / sequentielle Elemente: 40-80ms zwischen den Elementen.
• Dichte Raster: 20-40ms (mehr Elemente, weniger Verzögerung pro Element, sonst schleppt der Rest).
• Begrenze die Gesamtenthüllung auf etwa 600-800ms für eine Gruppe; wenn Anzahl * Versatz dies überschreitet, verkleinere den Versatz oder wechsle zu einem abstandsbasierten Staffeln (Elemente weiter von einem Ursprungspunkt entfernt starten später).
• Die Staffelrichtung sollte dem Auge folgen: von oben nach unten oder von einem Brennpunkt ausstrahlend.

Die 1/3-Regel (zwei Formen, beide universell):

• Abstand – Kein Element sollte mehr als ~1/3 des Bildschirms ohne einen Zwischen-Keyframe oder eine Skalierungs-/Transparenzänderung zurücklegen. Lange, ununterbrochene Rutschbewegungen wirken wie „die Vorlage hat sich bewegt“, nicht wie „etwas ist passiert“.
• Gleichzeitigkeit – Bei 3+ Elementen sollten sich nicht mehr als ~1/3 gleichzeitig aktiv bewegen. Der Rest hält oder bewegt sich als Ambient. Alles, was sich gleichzeitig bewegt, ist Rauschen ohne Brennpunkt.

Vorlauf und Nachlaufen verkaufen physikalische Bewegung

• Vorlauf: Eine winzige Gegenbewegung vor der Hauptaktion (ein Button taucht auf scale 0.95 ab, bevor er aufpoppt, eine Figur duckt sich, bevor sie springt). 60-120ms sind ausreichend.
• Nachlaufen / überlappende Aktion: Nachlaufende Teile bewegen sich weiter, nachdem der Hauptkörper angehalten hat (eine Heldenkarte landet, dann setzen ihr Schatten und Label 40-80ms später). Staffele das Setzen der angehängten Elemente, anstatt alles im selben Frame zu stoppen.
• Bögen: Natürliche Bewegungskurven; reine geradlinige Translation eines organischen Objekts wirkt mechanisch. Füge einen leichten Bogen zu x/y hinzu oder animiere einen Pfad.

Beat-Sync und Rhythmus

Wenn Bewegung Audio begleitet, platziere Impact-Keyframes (einen Schlag, einen Schnitt, eine Enthüllung) auf dem Beat, nicht zwischen den Beats. Bei 120 BPM ist ein Beat 500ms; ein Achtelnoten-Raster ist 250ms. Quantisiere Schlüsselmomente auf dieses Raster. Bei Schnitten ohne Musik etabliere einen visuellen Puls (z. B. ein großes Ereignis alle ~500-800ms), damit das Stück konsistent atmet.

Federbasierte vs. dauerbasierte Bewegung

Federn (Masse / Steifigkeit / Dämpfung) bestimmen ihre Dauer selbst und wirken physikalischer für interaktive, unterbrechbare Bewegungen (Ziehen-Loslassen, Gesten). Dauer+Easing ist besser für choreografierte, timeline-gebundene Sequenzen (Video, scroll-gebundene Enthüllungen), bei denen exakte Synchronisation zählt. Eine knackige Standardfeder: Steifigkeit 300, Dämpfung 30, Masse 1. Siehe references/easing-curves.md für eine vollständige Federtabelle.

Diagnose häufiger Fehler

• Fühlt sich steif/robotisch an -> Verwendung von linear oder symmetrischem Easing bei einem Eingang; auf ease-out umstellen.
• Fühlt sich schwimmend/träge an -> Dauer zu lang oder ease-out zu weich; Dauer um 30 % kürzen, Kurve verschärfen.
• Fühlt sich billig/ruckelig an -> Alles erscheint auf einmal (kein Staffeln), oder alle Elemente teilen eine Dauer unabhängig von der Größe.
• Fühlt sich trotz Easing mechanisch an -> Kein Vorlauf, kein Nachlaufen, gerade Pfade; Bögen und Überlappungen hinzufügen.

Kurzreferenz

Bedarf	Verwenden
Eingang	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Ausgang	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Bewegung	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
Marken-Pop	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
Listenstaffelung	40-80ms pro Element, Obergrenze ~700ms gesamt
Nur Schleifen	linear

Referenzdateien

• references/easing-curves.md – Benannte Cubic-Bezier-Bibliothek mit genauen Werten, Federkonfigurationen (Framer/react-spring/iOS) und Dauerrichtlinien pro Elementtyp.
• references/easing-graph-editor.md – After Effects Graph-Editor-Handwerk: Geschwindigkeitsdiagramm vs. Wertediagramm, Easing-Handles und Einfluss-/Geschwindigkeitszahlen sowie Schritt-für-Schritt-Rezepte für schnelle, überschwingende, vorlaufende und hüpfende Animationen.
• references/twelve-principles.md – Alle 12 Disney-Prinzipien, jeweils mit einem konkreten, numerischen Bewegungsgrafik-Beispiel.