RevantThota55/FreeFrame-Studio

Animationsvokabular

Erstantwort

Wenn dieses Skill zum ersten Mal ohne eine konkrete Frage aufgerufen wird, antworte nur mit:

Ich bin bereit, jedem von dir beschriebenen Bewegungseffekt einen Namen zu geben – mein Wissen basiert auf Emil Kowalskis Animationsphilosophie.

Gib keine weiteren Informationen, bis der Nutzer eine Frage stellt.

Wandle eine vage Beschreibung einer Bewegung oder eines Effekts in den präzisen Begriff um, damit der Nutzer weiß, wonach er fragen muss.

Kurzstart

Der Nutzer beschreibt einen Effekt grob. Du gibst den/die passenden Begriff(e) in diesem Format zurück:

**Staffelung (Stagger)** – Animiert mehrere Elemente nacheinander mit einer kleinen Verzögerung zwischen jedem und erzeugt so eine Kaskade.

Wenn mehrere Begriffe in Frage kommen, liste den besten zuerst auf, dann 1–2 Alternativen mit einem einzeiligen Hinweis, wie sie sich unterscheiden.

Anleitungen

1. Lies auf die Absicht, nicht auf Schlüsselwörter. Nutzer beschreiben, was sie sehen oder fühlen („federnd“, „gleitet weg“, „zeichnet sich selbst“), nicht den technischen Namen. Ordne die Empfindung dem folgenden Glossar zu.
2. Zitiere das Glossar wörtlich. Seine Beschreibungen sind autoritativ – verwende sie unverändert, paraphrasiere nicht.
3. Grenze ähnliche Begriffe ab. Wenn zwei konkurrieren ( Clip-pfad vs. Maske, Einschwingen (Pop In) vs. Hüpfen (Bounce), Übergang mit gemeinsamem Element vs. Layout-Animation), stelle sie gegenüber, damit der Nutzer wählen kann.
4. Wenn nichts genau passt, nenne den nächsten Begriff und sage deutlich, dass es eine Annäherung ist, oder beschreibe den Effekt mit den Worten des Glossars (z. B. „das ist eine Staffelung von Maßstabs-Eingängen“).
5. Bleibe innerhalb dieses Glossars. Wenn ein Begriff hier wirklich nicht vorkommt, sage das, anstatt einen zu erfinden – du darfst das Konzept aber mit diesen Worten erklären.
6. Halte es kurz. Eine Namensfrage will einen Namen, keinen Aufsatz. Beginne mit dem Begriff; erweitere nur, wenn gefragt.

Beispiele

Beispiel 1 – Gefühlsbasiert Nutzer: „Wie nennt man das, wenn ein Popover aus dem Button herauszuwachsen scheint, auf den man geklickt hat, anstatt aus seiner Mitte?“ Ausgabe:

**Ursprungsbewusste Animation (Origin-aware animation)** – Ein Element animiert aus seinem Auslöser heraus, wie ein Popover, das aus dem Button wächst, der es geöffnet hat, anstatt aus seiner eigenen Mitte (was in CSS der Standard ist).

Beispiel 2 – Abgrenzung Nutzer: „Das Ding, wo ein Bild in ein anderes Bild übergeht.“ Ausgabe:

**Morph** – Eine Form verwandelt sich sanft in eine andere Form, z. B. Dynamic Island.

Nahe Alternativen:
- **Überblendung (Crossfade)** – wenn sie einfach an derselben Stelle übereinander einblenden.
- **Übergang mit gemeinsamem Element (Shared element transition)** – wenn ein Element von einer Position zur anderen wandert und sich dabei verwandelt.

Beispiel 3 – Physikgefühl Nutzer: „Dieses iOS-Scrollen, bei dem es Widerstand leistet und zurückschnappt, wenn man zu weit zieht.“ Ausgabe:

**Gummiband-Effekt (Rubber-banding)** – Widerstand und Zurückschnappen, wenn man über eine Grenze zieht (das iOS-Überscroll-Gefühl).

Glossar

Eine kuratierte Momentaufnahme, die der Seite /vocabulary des Projekts entspricht; halte beide synchron, wenn sich eine ändert.

Eingänge & Ausgänge – wie Elemente erscheinen und verschwinden

• Einblenden (Fade in) / Ausblenden (Fade out) – Element erscheint oder verschwindet durch Änderung der Deckkraft.
• Hineingleiten (Slide in) – Element tritt ein, indem es von außerhalb des Bildschirms hereingleitet (links, rechts, oben oder unten).
• Maßstabs-Eingang (Scale in) – Element wächst beim Erscheinen von kleiner auf volle Größe, oft gepaart mit einem Einblenden.
• Einschwingen (Pop in) – Element erscheint mit einem leichten Überschwingen, als ob es an seinen Platz hüpft.
• Enthüllen (Reveal) – Inhalt wird nach und nach freigelegt, oft durch Animieren eines Clip-Pfads oder einer Maske.
• Eingang / Ausgang (Enter / Exit) – Die Animation, die ein Element abspielt, wenn es dem Bildschirm hinzugefügt oder von ihm entfernt wird.

Ablauf & Timing – Koordination mehrerer Elemente oder Momente

• Keyframes – Definierte Punkte in einer Animation (0%, 50%, 100%), zwischen denen der Browser die Lücken füllt.
• Interpolation / Tween – Erzeugen aller Zwischenbilder zwischen einem Start- und Endwert, sodass die Bewegung kontinuierlich ist.
• Staffelung (Stagger) – Animiert mehrere Elemente nacheinander mit einer kleinen Verzögerung zwischen jedem und erzeugt so eine Kaskade.
• Orchestrierung (Orchestration) – Bewusstes Timing mehrerer Animationen, sodass sie sich wie eine koordinierte Bewegung anfühlen.
• Verzögerung (Delay) – Zeit bevor eine Animation startet.
• Dauer (Duration) – Wie lange eine Animation dauert.
• Füllmodus (Fill mode) – Ob ein Element die Stile seines ersten oder letzten Frames vor dem Start der Animation oder nach ihrem Ende behält (z. B. forwards).
• Schritt-Animation (Stepped animation) – Eine Animation, die in diskrete Schritte unterteilt ist, wie ein Countdown-Timer.

Bewegung & Transformationen – Ändern von Position, Größe oder Winkel eines Elements

• Verschieben (Translate) – Bewege ein Element entlang der X- oder Y-Achse.
• Skalieren (Scale) – Mache ein Element größer oder kleiner.
• Drehen (Rotate) – Drehe ein Element um einen Punkt.
• Scheren (Skew) – Neige ein Element entlang der X- oder Y-Achse und verzerre es aus seiner rechteckigen Form.
• 3D-Kippen / Umdrehen (3D tilt / Flip) – Drehung im 3D-Raum (rotateX / rotateY), um Tiefe hinzuzufügen.
• Perspektive (Perspective) – Wie stark der 3D-Effekt wirkt – ein niedrigerer Wert verstärkt die Tiefe, als ob der Betrachter näher dran wäre.
• Transformationsursprung (Transform origin) – Der Ankerpunkt, von dem eine Skalierung oder Drehung ausgeht oder spinnt.
• Ursprungsbewusste Animation (Origin-aware animation) – Ein Element animiert aus seinem Auslöser heraus, wie ein Popover, das aus dem Button wächst, der es geöffnet hat, anstatt aus seiner eigenen Mitte (was in CSS der Standard ist).

Übergänge zwischen Zuständen – Verbinden eines Zustands, einer Ansicht oder eines Elements mit einem anderen

• Überblendung (Crossfade) – Ein Element blendet aus, während ein anderes an derselben Stelle einblendet.
• Kontinuitätsübergang (Continuity transition) – Eine Änderung, die den Nutzer orientiert hält, indem sie Vorher und Nachher visuell verbindet. Zum Beispiel das Vergrößern und Verkleinern desselben Rechtecks.
• Morph – Eine Form verwandelt sich sanft in eine andere Form, z. B. Dynamic Island.
• Übergang mit gemeinsamem Element (Shared element transition) – Ein Element wandert und verwandelt sich von einer Position in eine andere, wie eine Vorschau, die sich zu einer Karte ausdehnt.
• Layout-Animation (Layout animation) – Wenn sich die Größe oder Position eines Elements ändert, animiert es an die neue Stelle, anstatt zu springen.
• Akkordeon / Einklappen (Accordion / Collapse) – Ein Bereich erweitert und verkleinert sanft seine Höhe, um Inhalt zu zeigen oder zu verbergen.
• Richtungsbewusster Übergang (Direction-aware transition) – Inhalt gleitet beim Vorwärtsgehen in eine Richtung und beim Zurückgehen in die entgegengesetzte, sodass die Navigation ein Richtungsgefühl hat.

Scrollen – Bewegung, die an das Scrollen oder Navigieren zwischen Ansichten gebunden ist

• Scroll-Enthüllung (Scroll reveal) – Elemente blenden ein oder gleiten ein, wenn sie in den Ansichtsbereich gelangen.
• Scroll-gesteuerte Animation (Scroll-driven animation) – Eine Animation, deren Fortschritt direkt an die Scroll-Position gebunden ist.
• Parallax – Hintergrund und Vordergrund bewegen sich beim Scrollen mit unterschiedlichen Geschwindigkeiten und erzeugen Tiefe.
• Seitenübergang (Page transition) – Eine Animation, die beim Navigieren von einer Seite oder Route zu einer anderen abgespielt wird.
• Ansichtsübergang (View transition) – Der Browser wandelt sich zwischen zwei Zuständen oder Seiten um und verbindet gemeinsame Elemente.

Feedback & Interaktion – Reagieren auf die Aktionen des Nutzers

• Schwebe-Effekt (Hover effect) – Visuelle Änderung, wenn der Cursor über ein Element bewegt wird.
• Drück-/Tipp-Feedback (Press / Tap feedback) – Ein subtiles Verkleinern beim Klicken eines Elements, sodass es sich physisch anfühlt.
• Halten zum Bestätigen (Hold to confirm) – Ein Fortschrittseffekt, der sich füllt, während der Nutzer einen Knopf gedrückt hält.
• Ziehen (Drag) – Bewegen eines Elements durch Greifen, oft mit Schwung beim Loslassen.
• Ziehen zum Neuanordnen (Drag to reorder) – Ziehen von Elementen in einer Liste, um sie neu anzuordnen, während die anderen Platz machen.
• Wischen zum Schließen (Swipe to dismiss) – Ziehen eines Elements aus dem Bildschirm, um es zu schließen, wie eine Schublade oder ein Toast.
• Gummiband-Effekt (Rubber-banding) – Widerstand und Zurückschnappen, wenn man über eine Grenze zieht (das iOS-Überscroll-Gefühl).
• Schütteln / Wackeln (Shake / Wiggle) – Ein schnelles Hin-und-Her-Zittern, das einen Fehler oder eine abgelehnte Eingabe signalisiert.
• Welle (Ripple) – Ein Kreis, der sich vom Berührungspunkt aus ausbreitet und den Druck bestätigt.

Verlangsamung (Easing) – wie sich die Geschwindigkeit während einer Animation ändert

• Verlangsamung (Easing) – Die Rate, mit der eine Animation beschleunigt oder verlangsamt.
• Auslaufen (Ease-out) – Startet schnell, endet langsam. Der Standard für die meisten Benutzeroberflächen und alles, was auf den Nutzer reagiert.
• Einlaufen (Ease-in) – Startet langsam, endet schnell. Wird normalerweise vermieden; kann sich träge anfühlen.
• Ein- und Auslaufen (Ease-in-out) – Langsam, schnell, langsam. Gut für Elemente, die bereits auf dem Bildschirm sind und sich von A nach B bewegen.
• Linear – Konstante Geschwindigkeit. Vermeiden für UI; reservieren für Ladebalken oder Laufbänder.
• Cubic-bezier – Eine benutzerdefinierte Verlangsamungskurve, die du für präzise Kontrolle definierst.
• Asymmetrische Verlangsamung (Asymmetric easing) – Eine Kurve, die mit unterschiedlichen Raten beschleunigt und verlangsamt. Fühlt sich lebendiger an als eine symmetrische.

Feder-Animationen – physikbasierte Bewegung als Alternative zur Verlangsamung mit fester Dauer

• Feder (Spring) – Bewegung, die von der Physik (Spannung, Masse, Dämpfung) angetrieben wird, nicht von einer festgelegten Dauer.
• Steifigkeit / Spannung (Stiffness / Tension) – Wie stark die Feder in Richtung ihres Ziels zieht. Höher fühlt sich schneller an.
• Dämpfung (Damping) – Wie schnell eine Feder zur Ruhe kommt. Niedrigere Dämpfung bedeutet mehr Hüpfen und Schwingen.
• Masse (Mass) – Wie schwer sich das animierte Element anfühlt. Mehr Masse macht es langsamer und träger.
• Hüpfen (Bounce) – Eine Feder, die überschießt und zur Ruhe kommt und so Verspieltheit hinzufügt.
• Wahrnehmbare Dauer (Perceptual duration) – Wie lange sich eine Feder abgeschlossen anfühlt, auch wenn sie darunter weiter mikro-schwingt.
• Schwung (Momentum) – Bewegung, die Geschwindigkeit überträgt, besonders nach einem Ziehen oder einer Unterbrechung.
• Geschwindigkeit (Velocity) – Wie schnell und in welche Richtung sich ein Element bewegt. Eine Feder überträgt sie in die nächste Animation, wenn sie unterbrochen wird, sodass ein gewischtes Element seine Geschwindigkeit behält.
• Unterbrechbare Animation (Interruptible animation) – Eine Animation, die mitten im Flug sanft umgeleitet werden kann, anstatt zuerst zu Ende gehen zu müssen.

Schleifen & Umgebungsbewegung – Animationen, die von selbst laufen

• Laufband (Marquee) – Text oder Inhalt, der kontinuierlich in einer Schleife scrollt.
• Schleife (Loop) – Eine Animation, die sich wiederholt, eine bestimmte Anzahl von Malen oder unendlich.
• Alternieren (Yoyo) – Eine Schleife, die vorwärts abspielt und dann jede Wiederholung umkehrt, anstatt zum Anfang zurückzuspringen.
• Kreisen (Orbit) – Ein Element, das auf einem kontinuierlichen Pfad um ein anderes kreist.
• Pulsieren (Pulse) – Eine sanfte, sich wiederholende Skalierungs- oder Deckkraftänderung, um Aufmerksamkeit zu erregen.
• Schweben (Float) – Eine sanfte, kontinuierliche Auf- und Abwärtsbewegung, die ein statisches Element lebendig und schwerelos wirken lässt.
• Leerlauf-Animation (Idle animation) – Subtile Bewegung, die abgespielt wird, während ein Element einfach nur dasitzt und darauf wartet, interagiert zu werden.

Feinschliff & Effekte – die kleinen Details, die gut von großartig unterscheiden

• Unschärfe (Blur) – Ein Weichzeichnungsfilter, der verwendet wird, um ein Element zu mildern oder winzige Unvollkommenheiten zu kaschieren.
• Clip-Pfad (Clip-path) – Beschneiden eines Elements auf eine Form, verwendet für Enthüllungen, Masken und Vorher-/Nachher-Schieberegler.
• Maske (Mask) – Verstecken oder Freilegen von Teilen eines Elements mittels einer Form oder eines Farbverlaufs – wie Clip-Pfad, aber mit weichen, ausblendbaren Kanten.
• Vorher / Nachher-Schieberegler (Before / after slider) – Ein ziehbarer Teiler, der zwischen zwei überlagerten Bildern wischt, um sie zu vergleichen.
• Linienzeichnung (Line drawing) – Ein SVG-Pfad, der sich selbst zeichnet, wie ein unsichtbarer Stift, der ihn nachfährt.
• Text-Morph (Text morph) – Text, der sich beim Ändern Zeichen für Zeichen animiert und so die Aufmerksamkeit auf den neuen Wert lenkt.
• Skelett / Schimmer (Skeleton / Shimmer) – Ein Platzhalter mit einem sich bewegenden Glanz, der angezeigt wird, während Inhalt geladen wird.
• Zahlen-Ticker (Number ticker) – Ziffern, die auf einen Wert rollen oder hochzählen.
• Tabellenzahlen (Tabular numbers) – Ziffern mit fester Breite, sodass Zahlen beim Ändern nicht herumspringen. Unverzichtbar für Ticker, Timer und Zähler.
• Schreibmaschine (Typewriter) – Text, der Zeichen für Zeichen erscheint, als würde er getippt.

Leistung – was Bewegung flüssig hält, statt zu ruckeln

• Bildrate (FPS) – Bilder pro Sekunde. 60fps ist die Basis für flüssige Bewegung; 120fps auf neueren Displays.
• Ruckeln (Jank) – Sichtbares Stottern, wenn der Browser Frames fallen lässt, weil er mit der Animation nicht Schritt halten kann.
• Verlorener Frame (Dropped frame) – Ein Frame, bei dem der Browser sein Zeitfenster zum Zeichnen verpasst hat, was einen kleinen Haken in der Bewegung verursacht.
• Compositing – Der GPU erlauben, ein Element auf einer eigenen Ebene zu bewegen oder auszublenden, ohne Layout oder Neuanstrich zu wiederholen.
• will-change – Ein CSS-Hinweis, dass ein Element gleich animiert wird, damit der Browser es vorab auf eine eigene Ebene befördern kann.
• Layout-Trashing (Layout thrashing) – Animieren von Eigenschaften wie Breite, Höhe, oben oder links, die den Browser zwingen, das Layout in jedem Frame neu zu berechnen, was zu Ruckeln führt.

Wissenswerte Prinzipien – Konzepte, die leiten, wann und wie animiert werden sollte

• Zielgerichtete Animation (Purposeful animation) – Bewegung sollte eine Funktion erfüllen – orientieren, Feedback geben, Beziehungen zeigen – nicht nur dekorieren.
• Antizipation (Anticipation) – Ein kleines Aufziehen in die entgegengesetzte Richtung vor einer Bewegung, das andeutet, was gleich passieren wird.
• Nachziehen (Follow-through) – Teile eines Elements bewegen sich weiter und setzen sich leicht, nachdem die Hauptbewegung stoppt, und verleihen Gewicht.
• Stauchen & Strecken (Squash & stretch) – Verformen eines Elements, während es sich bewegt, um Gewicht, Geschwindigkeit und Flexibilität zu vermitteln.
• Wahrgenommene Leistung (Perceived performance) – Die richtige Animation lässt eine Schnittstelle schneller wirken, selbst wenn sie es nicht ist.
• Nutzungshäufigkeit (Frequency of use) – Je öfter ein Nutzer eine Animation sieht, desto kürzer und subtiler sollte sie sein.
• Räumliche Konsistenz (Spatial consistency) – Animieren, sodass ein Element seine Identität und Position über Zustände hinweg behält, damit Nutzer nie verlieren, wo Dinge hingegangen sind.
• Hardwarebeschleunigung (Hardware acceleration) – Das Animieren von transform und opacity ermöglicht der GPU, die Bewegung flüssig zu halten.
• Reduzierte Bewegung (Reduced motion) – Respektieren der prefers-reduced-motion-Einstellung des Nutzers, indem die Bewegung abgeschwächt oder entfernt wird.