Rover54/Videocut

Bewegungsprinzipien

Entscheide, wie sich etwas bewegen sollte, damit es sich richtig anfühlt – unabhängig vom verwendeten Tool. Diese Fertigkeit beantwortet Timing, Easing, Abstände, Gewicht und Rhythmus. Sie wählt keinen Tech-Stack aus; sie liefert konkrete Zahlen (Dauern, Cubic-Bezier-Kurven, Stagger-Offsets, Federkonfigurationen), die bereit sind, an jede Implementierung übergeben zu werden.

Wann verwenden

• Bewegung wirkt steif, schwebend, mechanisch, roboterhaft oder billig und benötigt eine Diagnose.
• Auswahl der Dauer, Easing-Kurve und des Stagger-Offsets eines Clips oder Übergangs.
• Überprüfung, ob Bewegung die physikalische Intuition respektiert (Gewicht, Folgeverhalten, Bögen).
• Synchronisation von Keyframes mit einem musikalischen Beat oder Edit-Akzent.

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

Jede 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 die gesamte Sammlung bezieht.

Säule	Die Frage	Was sie bestimmt
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, Folgeverhalten

Drei Bewegungsebenen – Tiefe, nicht Flachheit

Flache Bewegung = nur die Hauptsache bewegt sich. Glaubwürdige Bewegung läuft auf 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 Icon, das sich bewegt, ein Label, das sich spät setzt).
• Umgebung – Hintergrundleben, das niemals Aufmerksamkeit erfordert (langsamer Verlaufsdrift, ein kontrastarmer Puls).

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

Kernprinzipien

Easing ist der größte Hebel

Lineare Bewegung wirkt roboterhaft. Reserver linear für kontinuierliche Schleifen (Spinner, Laufbänder, unendliches Scrollen) vor. Alles, was das Auge als diskretes Ereignis wahrnimmt, benötigt Beschleunigung.

Passe die Kurve an die Aktion an:

• Eintreten / Erscheinen -> Ease-Out (schneller Start, sanftes Einpendeln). Das Objekt kommt mit Energie an und verlangsamt in seine Position. cubic-bezier(0.16, 1, 0.3, 1).
• Austreten / Verschwinden -> Ease-In (sanfter Start, schnelles Ende). Das Objekt beschleunigt weg. cubic-bezier(0.7, 0, 0.84, 0).
• Bewegen / Neupositionieren (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 und erzeugt ein Überschwingen-und-Einpendeln, das sich wie „Gewicht“ anfühlt).

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

Manuelles Easing (After Effects). Bei manuellem Keyframing anstatt einer Kurve lassen sich dieselben Prinzipien auf den Graph-Editor übertragen: Forme den Geschwindigkeitsgraphen so, dass die Enden gegen Null abflachen, und erhöhe den Verzögerungseinfluss auf 80–90% für einen schnellen Start und ein sanftes Einpendeln. F9 (Easy Ease) ist nur ein symmetrischer 33%-Ausgangspunkt – mache es asymmetrisch. Siehe references/easing-graph-editor.md für das Lesen des Graph-Editors, Handle-/Einflusstechniken und Schritt-für-Schritt-Rezepte für Überschwingen, Antizipation und Hüpfer (einschließlich eines abklingenden Hüpfer-Ausdrucks).

Timing kommuniziert Gewicht und Bedeutung

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

Entfernung und Größe skalieren die Dauer. Ein kleines Icon, das sich 20px bewegt, und ein randloser Panel, der sich 800px bewegt, sollten NICHT dieselbe Dauer haben – der Panel braucht mehr Zeit, sonst wirkt er schwerelos. Eine praktische Skalierung: Halte die wahrgenommene Geschwindigkeit ungefähr konstant, indem du ~30-50% mehr Dauer hinzufügst, wenn sich Entfernung oder Fläche ungefähr verdoppeln. Schwere Objekte starten langsam und überschwingen weniger; leichte Objekte schnellen und können hüpfen.

Abstände und Staffelung erzeugen Rhythmus

Zeige eine Liste, ein Raster oder eine Gruppe niemals auf einmal an – es wirkt wie ein einzelnes flaches Ereignis. Staffle den Start jedes Kindes.

• Listen / aufeinanderfolgende Elemente: 40-80ms zwischen den Elementen.
• Dichte Raster: 20-40ms (mehr Elemente, weniger Verzögerung pro Element, sonst zieht sich der Schwanz).
• Begrenze die Gesamtenthüllung auf ungefähr 600-800ms für eine Gruppe; wenn Anzahl * Offset diesen Wert überschreitet, verkleinere den Offset oder wechsle zu einem entfernungsbasierten Stagger (Elemente weiter von einem Ursprungspunkt beginnen 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):

• Entfernung – kein Element bewegt sich mehr als ~1/3 des Bildschirms ohne einen Zwischen-Keyframe oder eine Skalen-/Opazitätsänderung. Lange ununterbrochene Rutschen lesen sich als „die Vorlage hat sich bewegt“, nicht als „etwas ist passiert“.
• Gleichzeitigkeit – bei 3+ Elementen sollten sich nicht mehr als ~1/3 gleichzeitig aktiv bewegen. Der Rest verharrt oder bewegt sich als Umgebung. Alles, was sich zusammen bewegt = Rauschen ohne Brennpunkt.

Antizipation und Folgeverhalten verkaufen physische Bewegung

• Antizipation: eine winzige Gegenbewegung vor der Hauptaktion (ein Knopf drückt sich auf scale 0.95 vor dem Aufpoppen, eine Figur duckt sich vor dem Sprung). 60-120ms reichen aus.
• Folgeverhalten / überlappende Aktion: nachlaufende Teile bewegen sich weiter, nachdem der Hauptkörper stoppt (eine Heldenkarte landet, dann setzen sich ihr Schatten und Label 40-80ms später). Staffele das Einpendeln der angehängten Elemente, anstatt alles im selben Frame zu stoppen.
• Bögen: natürliche Bewegungskurven; eine rein gerade Linientranslation eines organischen Objekts wirkt mechanisch. Füge einen leichten Bogen zu x/y hinzu oder animiere einen Pfad.

Beat-Synchronisation und Rhythmus

Wenn Bewegung von Audio begleitet wird, setze Impact-Keyframes (einen Treffer, einen Schnitt, eine Enthüllung) auf den Beat, nicht zwischen die Beats. Bei 120 BPM beträgt ein Beat 500ms; ein Achtel-Raster ist 250ms. Quantisiere Schlüsselmomente auf dieses Raster. Bei Bearbeitungen ohne Musik etabliere einen visuellen Puls (z. B. ein Hauptereignis alle ~500-800ms), damit das Stück gleichmäßig atmet.

Feder- vs. Dauerbasierte Bewegung

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

Diagnose häufiger Fehler

• Wirkt steif/robotisch -> linear oder symmetrisches Easing bei einem Eintritt verwenden; auf Ease-Out umstellen.
• Wirkt schwebend/träge -> Dauer zu lang oder Ease-Out zu sanft; Dauer um 30% kürzen, Kurve verschärfen.
• Wirkt billig/ruckelig -> alles erscheint auf einmal (kein Stagger), oder alle Elemente teilen sich eine Dauer unabhängig von der Größe.
• Wirkt trotz Easing mechanisch -> keine Antizipation, kein Folgeverhalten, geradlinige Pfade; Bögen und Überlappung hinzufügen.

Kurzübersicht

Bedarf	Verwende
Eintritt	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Austritt	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Bewegen	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
Marken-Pop	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
Listen-Stagger	40-80ms pro Element, max. ~700ms gesamt
Nur Schleife	linear

Referenzdateien

• references/easing-curves.md – benannte Cubic-Bezier-Bibliothek mit exakten Werten, Federkonfigurationen (Framer/react-spring/iOS) und dauerbezogener Anleitung pro Elementtyp.
• references/easing-graph-editor.md – After Effects Graph-Editor-Handwerk: Geschwindigkeitsgraph vs. Wertgraph, Easing-Handles und Einfluss-/Geschwindigkeitszahlen sowie Schritt-für-Schritt-Rezepte für knackige, überschwingende, antizipierende und hüpfende Bewegungen.
• references/twelve-principles.md – alle 12 Disney-Prinzipien, jedes mit einem konkreten, numerischen Bewegungsgrafiken-Beispiel.