Slow In / Slow Out (auch: Ease In/Ease Out) ist das sechste der zwölf Animationsprinzipien und beschreibt, dass natürliche Bewegungen nicht linear starten und enden, sondern am Beginn langsam beschleunigen (Slow Out) und am Ende langsam abbremsen (Slow In), wodurch organische und physikalisch glaubwürdige Dynamik entsteht.
Rubrik: Animation & VFX · Unterrubrik: Grundbegriffe · Niveau: Einsteiger Synonyme / Auch bekannt als: Ease In/Ease Out, Easing, Beschleunigungs- und Verzögerungsprinzip
Was ist Slow In/Slow Out?
Das Prinzip beschreibt das Beschleunigungs- und Verzögerungsverhalten einer Bewegung. Nahezu jede reale Bewegung folgt diesem Muster: Sie beginnt langsam, erreicht in der Mitte ihre höchste Geschwindigkeit und verlangsamt sich am Ende. Animationen, die stattdessen konstante, lineare Geschwindigkeit zeigen, wirken mechanisch und roboterhaft.
Erklärung
In der klassischen Zeichentrickanimation wurden Slow-In/Slow-Out-Phasen durch die Anzahl der Zeichnungen pro Zeiteinheit realisiert. Viele dicht aufeinanderfolgende, ähnliche Zeichnungen in einer Phase ergeben langsame Bewegung (Slow); wenige, weit voneinander entfernte Zeichnungen ergeben schnelle Bewegung.
In der digitalen Animation wird Slow In/Slow Out durch die Form der Keyframe-Interpolationskurven im Graph Editor gesteuert. Drei grundlegende Kurventypen:
- Linear: Gleichmäßige Geschwindigkeit von Anfang bis Ende – wirkt mechanisch.
- Ease In (Slow In): Bewegung verlangsamt sich am Ende – Objekt kommt sanft zum Stillstand.
- Ease Out (Slow Out): Bewegung beschleunigt am Anfang – Objekt startet sanft aus der Ruhe.
- Ease In/Out (Slow In/Slow Out): Kombination beider – typisch für natürliche, organische Bewegung.
Die konkrete Kurvenstärke (wie stark das Easing ist) ist eine künstlerische Entscheidung. Sehr starkes Easing erzeugt weiche, fließende Bewegungen; schwaches Easing erzeugt direktere, energetischere Bewegungen. Mechanische Objekte (Maschinen, Roboter) profitieren oft von wenig Easing oder linearer Bewegung.
Ein häufiger Anfängerfehler ist das automatische Easing aller Keyframes in 3D-Software: Standardmäßig interpolieren viele Programme mit Bezier-Kurven, die unbeabsichtigtes „Overshooting" (Überschießen) erzeugen, wenn die Kurven nicht kontrolliert werden. Der sichere Einstieg ist die Kontrolle jeder Kurve im Graph Editor.
Beispiele
- Türöffnung: Eine Tür öffnet sich langsam (Slow Out), erreicht die maximale Schwingweite und bremst sanft ab, bevor sie gegen den Anschlag trifft (Slow In) – physikalisch korrekte Trägheit.
- Kamerabewegung: Ein Kamera-Dolly startet sanft und bremst weich ab – hartes, lineares Kamerafahren wirkt im Schnitt störend.
- Bouncing Ball: Der Ball beschleunigt im freien Fall (Slow Out nach dem Scheitelpunkt), prallt auf, und das nächste Hochsteigen beginnt langsam (Slow Out nach dem Aufprall).
- Motion Design – Text-Einblendung: Ein Textelement gleitet mit Ease Out ins Bild und stoppt mit Ease In – Standard in professionellem Motion Design.
- UI-Animation: Dropdown-Menüs öffnen sich mit Ease Out und schließen sich mit Ease In – intuitiv wirkende Interface-Animation nach den Prinzipien von Material Design und Human Interface Guidelines.
In der Praxis
Im Graph Editor von Maya, Blender oder After Effects lässt sich Slow In/Slow Out durch Bezier-Kurven präzise steuern. Die wichtigste Arbeit ist das Sichten der Kurven nach automatischer Keyframe-Interpolation: Ungewollte Overshoot-Plateaus oder flache Shoulders müssen manuell korrigiert werden. In After Effects erleichtert das Expressions-System (z. B. easeAndWizz-Script) die konsistente Anwendung von Easing auf mehrere Layer gleichzeitig.
Vergleich & Abgrenzung
Slow In/Slow Out steuert die Geschwindigkeitsverteilung innerhalb einer Bewegung; Timing steuert die Gesamtdauer einer Bewegung. Beide Prinzipien gemeinsam bestimmen den Rhythmus und das Gewichtsgefühl einer Animation. Arcs beschreiben die räumliche Kurve einer Bewegung, Slow In/Slow Out beschreibt ihr zeitliches Profil.
Häufige Fragen (FAQ)
Was ist der Unterschied zwischen Ease In und Slow In? Die Begriffe sind synonym. „Ease In" ist die technische Bezeichnung in Software-Interfaces, „Slow In" ist der klassische Animationsjargon. Ease In bedeutet: Die Bewegung verlangsamt sich am Ende (sie „kommt langsam an").
Kann ich Slow In/Slow Out in CSS-Animationen verwenden? Ja. CSS bietet ease, ease-in, ease-out und ease-in-out als Standard-Timing-Functions, die genau dieses Prinzip umsetzen. Eigene Kurven werden mit cubic-bezier() definiert.
Verwandte Einträge
Weiterführend
- Thomas, F. & Johnston, O. (1981): The Illusion of Life: Disney Animation. Abbeville Press.
- Williams, R. (2001): The Animator's Survival Kit. Faber and Faber.
- Lasseter, J. (1987): „Principles of Traditional Animation Applied to 3D Computer Animation". ACM SIGGRAPH, 21(4), 35–44.
