After Effects: loopOut() und loopIn()

loopOut() und loopIn() in After Effects sind Expressions, die eine bestehende Keyframe-Animation automatisch und nahtlos vor oder nach dem Keyframe-Bereich wiederholen – in vier verschiedenen Modi.

Rubrik: Software & Tools Deep-Dive · Unterrubrik: Adobe After Effects · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Loop Expression, loopOut, loopIn, Loop-Out-Expression

Was sind loopOut() und loopIn()?

In After Effects läuft eine Animation standardmäßig nur einmal ab: Vom ersten bis zum letzten Keyframe, danach bleibt der Wert auf dem letzten Keyframe-Stand stehen. loopOut() und loopIn() sind einzeilige Expressions, die dieses Verhalten ändern: Die Animation wiederholt sich entweder vorwärts (loopOut) oder rückwärts in der Zeit (loopIn).

Diese Expressions sind elementarer Bestandteil des Motion-Design-Workflows. Endlos laufende Ladebalken, loopende Hintergrundbewegungen, rhythmische UI-Animationen oder Charakter-Idle-Animationen – all das lässt sich mit zwei Keyframes und einer Expression realisieren, ohne den Kompositions-Zeitraum mit Hunderten von Keyframes zu füllen.

Erklärung mit konkreten Parametern

Grundsyntax

``javascript loopOut(type, numKeyframes) loopIn(type, numKeyframes) ``

Die vier Loop-Modi im Detail

`"cycle"` (Standard) Die Animation von erstem bis letztem Keyframe wird nach dem letzten Keyframe exakt wiederholt. Der Übergang springt abrupt vom Endwert zum Startwert zurück – für nahtlose Schleifen müssen Start- und Endwert identisch sein.

``javascript loopOut("cycle") ``

`"pingpong"` Die Animation läuft vorwärts, dann rückwärts, dann wieder vorwärts usw. – wie ein Ping-Pong-Ball. Ideal für hin-und-her-pendelnde Bewegungen.

``javascript loopOut("pingpong") ``

`"offset"` Jede Wiederholung setzt den Endwert der vorherigen als neuen Startpunkt fort. Ideal für fortlaufende Bewegungen wie endlos scrollende Texte oder akkumulierende Rotationen.

``javascript loopOut("offset") ``

`"continue"` Die letzte Keyframe-Geschwindigkeit (Velocity) wird beibehalten und die Animation läuft mit dieser Geschwindigkeit linear weiter. Kein echtes Looping, sondern ein "Einfrieren der Bewegungsrichtung".

``javascript loopOut("continue") ``

numKeyframes gezielt einsetzen

Mit numKeyframes = 2 werden nur die letzten zwei Keyframes für die Schleife verwendet – nützlich, wenn ein Layer einen Einstiegs-Keyframe (z. B. Fade-In) hat, der nicht Teil der Schleife sein soll.

``javascript loopOut("cycle", 2) // Nur die letzten 2 Keyframes werden geloopt loopIn("cycle", 2) // Nur die ersten 2 Keyframes werden geloopt ``

Schritt-für-Schritt Anleitung

1. Mindestens zwei Keyframes auf einer Eigenschaft setzen (z. B. Position bei Sekunde 0 und Sekunde 1).
2. Alt + Klick auf die Stoppuhr der Eigenschaft – das Expression-Feld öffnet sich.
3. Eingeben: loopOut("cycle")
4. Enter drücken. Im Timeline-Panel erscheinen nun gestrichelte Linien nach dem letzten Keyframe – das sind die Schleifenphasen.
5. Im Graph Editor (Shift + F3) ist der Verlauf der Loop-Kurve sichtbar.
6. Für PingPong: loopOut("pingpong") – die Kurve spiegelt sich nach jedem Durchlauf.
7. Für nahtlosen Cycle: Ersten und letzten Keyframe-Wert identisch setzen und Easy Ease (F9) auf beide anwenden.

Beispiele – 5 konkrete Anwendungen

1. Endlos-Ladebalken: Zwei Keyframes auf der X-Position (0 px → 400 px), dann loopOut("cycle"). Der Balken bewegt sich kontinuierlich von links nach rechts.
2. Atmende Icon-Animation: Scale bei Sekunde 0 auf 100 %, bei Sekunde 0,5 auf 105 %, bei Sekunde 1 zurück auf 100 %. loopOut("cycle") – sanftes Pulsieren ohne Unterbrechung.
3. Windmühlen-Rotation: Rotation von 0° zu 360° in 3 Sekunden, loopOut("cycle"). Da 0° und 360° identisch sind, ist die Schleife perfekt nahtlos.
4. Endlosscrollen eines Hintergrunds: Position-X von 0 px auf −1920 px (Bildbreite), loopOut("offset"). Der Hintergrund scrollt kontinuierlich nach links und setzt nahtlos fort.
5. PingPong-Button-Hover: Skalierung von 100 % auf 110 % in 0,3 Sekunden, loopOut("pingpong"). Das Element pulsiert hin und her – für UI-Prototypen oder Erklärvideos.

In der Praxis

Shortcuts:

• U → Alle Keyframes eines Layers anzeigen (damit Loop-Keyframes sichtbar werden)
• Alt + Klick Stoppuhr → Expression-Feld öffnen
• E → Alle Expressions eines Layers einblenden

Häufige Fehler:

• Loop springt: Start- und Endwert der Cycle-Schleife sind nicht identisch. Lösung: Letzten Keyframe-Wert exakt auf den ersten Wert kopieren.
• Easy Ease stört den Loop: Wenn der erste und letzte Keyframe Easy Ease haben und der Wert identisch ist, entstehen "Plateaus" am Übergang. Lösung: Keyframe-Interpolation im Graph Editor auf Linear setzen oder loopOut("pingpong") verwenden.
• Nur die Schleifenphase ist gewünscht, nicht der Eingang: numKeyframes = 2 verwenden, um Einstiegs-Keyframes aus dem Loop auszuschließen.
• loopOut() auf einem Layer ohne Keyframes: After Effects gibt einen Fehler zurück. Die Expression benötigt mindestens zwei Keyframes auf der Eigenschaft.

Profi-Tipp: Für Charakter-Animationen (Idle, Walk-Cycle) loopOut("cycle") mit genau so vielen Keyframes setzen, dass ein vollständiger Bewegungszyklus abgedeckt ist – z. B. 24 Frames für einen 1-Sekunden-Walk-Cycle bei 24 fps.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Kann loopOut() und wiggle() kombiniert werden? Nicht direkt auf derselben Eigenschaft, da eine Expression nur eine aktive Rückgabe haben kann. Die übliche Lösung: loopOut() auf die Hauptbewegung, wiggle() auf ein übergeordnetes Null-Objekt.

Funktioniert loopOut() auch mit 3D-Layers und Kamera-Animationen? Ja. Position, Rotation und alle anderen Eigenschaften eines 3D-Layers oder einer Kamera unterstützen Expressions inklusive loopOut(). Besonders nützlich für loopende Kamera-Fahrten in Präsentations-Animationen.

Verwandte Einträge

• Wiggle Expression
• Expressions Grundlagen
• Graph Editor

Weiterführend

• Adobe After Effects Benutzerhandbuch – helpx.adobe.com/de/after-effects/using/expression-language-reference.html
• School of Motion: The Ultimate Guide to Loop Expressions – schoolofmotion.com
• Motionscript.com – Dan Ebberts: Abschnitt zu Looping Expressions