Wie im vorhergehenden Post angeschnitten, widmet sich dieser Blogpost dem Thema Timing, Easing und Frequenz, denn dazu hab ich einiges an Infos gefunden.
Da ich selbst oft am richtigen Timing scheitere und „ein Gefühl dafür bekommen“ kein wirklich guter Tipp ist, teile ich hier meine unvollständige aber trotzdem hilfreiche Sammlung an Infos zum Thema!

1. Timing & Geschwindigkeit – Das unsichtbare Rückgrat jeder Bewegung

Timing ist einer der sensibelsten Faktoren im Motion Design. Selbst bei identischen Animationen können Unterschiede von Millisekunden die Wirkung komplett verändern – ob etwas zackig, elegant oder schleppend wirkt, entscheidet das Timing.
Da ist natürlich viel „Gefühlssache“ und Übung – und ich hab erkannt dass ich durchaus noch einiges nachbessern muss in diesem Sektor – aber ein paar Faustregeln sind mir in der Recherche untergekommen.

Faustregeln:

• UI/UX Motion >> 200–500ms für Mikrointeraktionen (z. B. Hover, Tap)
• „Brand-Driven Motion“ >> 500–1200ms für Logoanimationen, Transitions
• Cinematic Motion >> bis zu 3000ms für Storytelling-Elemente

Wichtig:

Eine Bewegung sollte nicht schneller sein als die menschliche Wahrnehmung – aber auch nicht zu langsam, da dies als „träge“ oder „veraltet“ empfunden wird.

Pro-Tipp: Teste Bewegungen nicht nur im Designprogramm, sondern in realer Interaktion. Die gefühlte Zeit unterscheidet sich massiv vom “Designgefühl”.
(Vgl. IBM o.D.)

Ein paar weitere Dinge, die man schon zu Beginn des Prozesses bedenken soll:

• Ein- und Ausblendedauer: Wie schnell erscheinen Dinge? Ploppen sie direkt rein oder kommen sie langsam, fast filmisch?
• Gestaffelte Animation: Mehrere Elemente nacheinander erscheinen zu lassen, schafft Fokus und Orientierung.
• Anticipation & Delay: Eine Mini-Verzögerung vor einer Aktion lässt Animationen viel natürlicher wirken. Stichwort: Spannung aufbauen!

Das Ziel ist, dass sich alles „richtig“ anfühlt – nicht zu hektisch, nicht zu langsam, sondern im Takt der Marke (vgl. Gleave, Dawncreative 2024).

2. Easing – Die Kunst der Beschleunigung

Jaja, das Easing. Bei jeder Animation geht’s um Geschwindigkeit: Wie schnell startet und stoppt ein Objekt? Genau das regeln sogenannte Easing-Funktionen.

Easing beschreibt, wie sich Bewegung innerhalb eines Zeitraums verändert.
Easing erzeugt Emotion, Natürlichkeit oder Präzision. JETZT ist es – nach all den Projekten – endlich soweit und ich beschäftige mich WIRKLICH mit Easings – bisher habe ich mich da wohl eher durchgeschummelt, aber es gibt doch einiges zu wissen!

Gängige Easing-Kurven:

• linear (mechanisch, neutral)
• ease-in (sanfter Start, beschleunigt)
• ease-out (schneller Start, sanftes Ende)
• ease-in-out (beides kombiniert)
• bounce (verspielt, lebendig)
• elastic (organisch, eigenwillig)

Und es gibt SO VIEL MEHR, wie man beispielsweise hier schön aufgelistet findet:
https://easings.net/ 

Ein paar Anwendungsempfehlung:

• Branding: ease-in-out für Eleganz
• UX-Motion: ease-out für natürliches Ankommen
• Error States: bounce oder shake für Aufmerksamkeit
• Playful Brands: elastic curves für Charaktertiefe
  

(Vgl. Material Design o.D.)

Das WIE in Aftereffects

Ein kleiner Exkursion zu Graphs in Aftereffects

Value Graph
Der Value Graph zeigt den Wert der Eigenschaft über die Zeit – zum Beispiel die Y-Position eines Objekts. Er eignet sich besonders gut, wenn man genaue Kontrolle über die Pfadkurven und deren Form haben will.

Tipp: Oft fragt man sich: “Warum kann ich im Value Graph nichts anfassen?” Das passiert oft wenn man mit der Position arbeitet, denn ohne separate Dimensionen bleibt dieser Graph gesperrt für direkte Bearbeitung. Damit du den Value Graph überhaupt bearbeiten kannst, musst du bei Positionsanimationen “Separate Dimensions” aktivieren. Erst dann kannst du X- und Y-Werte getrennt steuern und im Graph Editor bearbeiten.

Tipp 2: Mit gedrückter Alt- oder Option-Taste kannst du die Handles der Keyframes noch besser kontrollieren (Stichwort: Convert Vertex Tool). So lassen sich Kurven präzise und feinfühlig formen – ähnlich wie Vektorpfade in Illustrator.

Speed Graph
Der Speed Graph hingegen zeigt die Geschwindigkeit über die Zeit. Er ist besonders hilfreich, wenn du wissen willst, wie schnell oder langsam sich ein Objekt bewegt – unabhängig vom genauen Wert der Bewegung.

Wann welchen Graph verwenden?

• Value Graph ist super für Bewegungen, bei denen du den Pfad genau kontrollieren willst, z. B. bei einem Bounce.
• Speed Graph eignet sich besser für Bewegungen mit gleichmäßigen Abläufen oder komplexen Abläufen wie z. B. eine Acht (∞-Bewegung), da diese im Value Graph schwer zu bearbeiten ist.

Manchmal gibt After Effects dir nur den Speed Graph – das hängt von der Art der Keyframes und der Eigenschaft ab.

Ich finde, dass es mit dem Wertediagramm einfacher ist, starke/aggresive Kurven zu erstellen. Auch ist es manchmal einfacher “Bounces” zu erzeugen, bei denen der Wert beispielsweise den Wert des End-Keyframes überschreitet (Overshoot, also 0-100 % Skalierung geht auf 110 %, bevor er auf 100 geht, ohne dass ein zusätzlicher Keyframe hinzugefügt werden muss).
Also, wenn ich mehr Kontrolle brauche, verwende ich das Geschwindigkeitsdiagramm, und wenn ich noch mehr Kontrolle brauche, verwende ich das Wertediagramm. 

Aber ich denke, es ist eine Frage der Bewegung und Präferenz. Manchmal macht das Geschwindigkeitsdiagramm seltsame Dinge, dann lässt es sich auch im Wertediagramm beheben. Manchmal müssen Sie im Wertediagramm die Dimensionen trennen, was ein zusätzlicher Schritt ist, den ich nicht machen möchte, wenn ich es nicht muss und da benutze ich das Speeddiagramm

ALSOOO

• Easy Ease ist nur der Einstieg – für professionelle Bewegungen brauchst du das Verständnis beider Graphen.
• Bounce-, Overshoot- und Custom-Easings werden erst durch den Graph Editor so richtig lebendig.
• Jede Animation ist anders – manchmal funktioniert der Speed Graph besser, manchmal der Value Graph. Es gibt keine allgemeingültige Regel – aber ein gutes Gespür entwickelt sich durch Übung.

(Vgl. Material Design o.D.)

3. Frequenz & Rhythmus – Die emotionale Kadenz

Frequenz bezeichnet, wie oft sich Bewegungen innerhalb eines Brand Systems wiederholen oder aktiv sind. Rhythmus ist das zeitliche Zusammenspiel einzelner Animationen.

Zum Beispiel: Eine „High-Energy-Brand“ kann 25 kleine Bewegungen pro Minute zeigen – eine Slow-Brand wiederum nur 5. Die „Bewegungshäufigkeit“ ist ein unterschätzter Bestandteil der Motion Identity.

STILLE & PAUSEN: Man soll auch bewusste Pausen („Motion Silence“) als stilistisches Mittel nutzen – wie Weißraum im Grafik Design ;). Sie schaffen Kontrast und steigern den Effekt der nächsten Bewegung.

• Animationssequenzen in zeitlichen Intervallen
• Synchronisation mit Audio
• „Bewegungsstille“ bewusst einsetzen (Ruhephasen)

(Vgl. Koto 2025)

ZUSATZ: Technische Tipps

Pro-Tipps & Hidden Tricks aus der Praxis

• Verwende „Overshoot“ (leichte Überdehnung der Bewegung), um Dynamik zu erzeugen
• Baue kleine imperfekte Bewegungen ein – z. B. leichtes Zittern, Fluktuationen → wirkt menschlicher
• Definiere Motion Tokens – vordefinierte Animationsbausteine für das gesamte Designsystem
• Achte auf den „Motion Character Arc“ – auch eine Bewegung braucht Dramaturgie
• Nutze Motion als Storytelling Device, nicht nur als Dekoration
• Setze Bewegungen bewusst asymmetrisch – das erzeugt Spannung
• Verwende „Motion Echoing“ – Bewegungen spiegeln sich in anderen UI-Elementen (Kohärenz)

Shortcuts und Tipps die in meiner Recherche erwähnt wurden

Shortcuts in After Effects, die du lieben wirst:

• U → Zeigt alle Keyframes eines Layers
• UU (Doppelklick U) → Zeigt alle geänderten Eigenschaften
• Shift + F9 → Easy Ease (statt Rechtsklick)
• Option + [ / Option + ] → Schneidet den Layer an der aktuellen Zeitmarke ein/aus
• Option + Drag Keyframe → Proportional Keyframe Timing anpassen
• Cmd/Ctrl + Option+ Shift + H → Toggle Graph Editor direkt (Zeitsparer!)
  

Extra Tipps:

• Custom Controls über Sliders & Expressions
  Gerade für wiederverwendbare Templates oder Toolkits hilfreich – so kannst du ganze Bewegungsabläufe per Slider steuern. Einmal Mehraufwand und dann immer Zeitsparen
• Graph Editor Presets speichern
  Viele wissen nicht, dass man im Flow-Plugin oder via Expressions seine liebsten Motion-Kurven speichern und wiederverwenden kann – spart Zeit bei Serienproduktionen.
• Arbeite mit Motion Sketching (analog oder digital)
  Einfach Bewegungen zuerst per Linien oder Scribbles aufzeichnen, um „emotionale Energieverläufe“ zu testen – bevor du in After Effects loslegst. Macht Storytelling in Motion verständlicher.
• Nutze den AE-Preview mit Ton!
  Viele testen Animationen ohne Sound – aber Motion mit Audio zu überprüfen, offenbart oft ganz neue Rhythmusprobleme oder -stärken.

Quellen:

• KOTO 2025
  KOTO (18.02.2025): Reel talk: the power of branded motion design. In: offbrandkoto, https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion (zuletzt aufgerufen am 16.03.2025)
  
• Never Sit Still o.D.
  Never Sit Still (o.D.): Motion Branding. In: Never Sit Still, https://neversitstill.com/motion-branding(zuletzt aufgerufen am 16.03.2025)

• IBM o.D.
  IBM (o.D.): Animation. In: IBM Design Language , https://www.ibm.com/design/language/animation/tips-and-techniques/ (zuletzt aufgerufen am 22.04.2025)

• Material Design o.D.
  Material Design o.D.: Understanding-motion. In: Material Design. https://m2.material.io/design/motion/understanding-motion.html#brand-expression (zuletzt aufgerufen am 22.04.2025)

*Zuhilfenahme von ChatGPT: Die KI wurde zur Übersetzung, Korrektur und Formulierungshilfe von Texten verwendet. Alle Inhalte wurden anschließend eigenständig ausgewertet, überarbeitet und in den hier präsentierten Beitrag integriert.