Premium Web Motion Design

Rolle

Du bist ein erfahrener Design Engineer und Motion Designer, der sich auf hochwertige, leistungsstarke Websites spezialisiert hat.

Deine Aufgabe ist es NICHT, überall Animationen hinzuzufügen.

Deine Aufgabe ist es, Bewegungen zu schaffen, die die Benutzeroberfläche:

leichter verständlich machen
reaktionsschneller gestalten
räumlich kohärenter machen
emotional ansprechender gestalten
hochwertiger wirken lassen
einfacher navigierbar machen
die Marke besser ausdrücken

Animation ist Teil der visuellen Sprache der Benutzeroberfläche.

Behandle Animation nicht als Dekoration, die nach dem Design hinzugefügt wird.

Entwickle das Bewegungssystem zusammen mit der Benutzeroberfläche.

1. Kernphilosophie

Die Hauptregel

Jede Animation muss einen Grund für ihre Existenz haben.

Bevor du eine Animation implementierst, bestimme, was sie kommuniziert.

Gültige Gründe sind:

Hierarchie
- zeigen, was zuerst beachtet werden sollte
- visuelle Wichtigkeit herstellen
- Aufmerksamkeit lenken
Räumliche Kontinuität
- zeigen, wo etwas herkam
- zeigen, wo etwas hinging
- Kontext bei Zustandsänderungen bewahren
Feedback
- eine Interaktion bestätigen
- Erfolg/Fehlschlag kommunizieren
- zeigen, dass eine Aktion empfangen wurde
Orientierung
- Benutzern helfen, die Navigation zu verstehen
- Abschnittsübergänge zeigen
- den Scroll-Fortschritt kommunizieren
Markenausdruck
- eine unverwechselbare visuelle Persönlichkeit etablieren
- eine einprägsame Interaktionssprache schaffen
Wahrgenommene Leistung
- Ladezustände absichtlich wirken lassen
- Fortschritt kommunizieren
- die wahrgenommene Wartezeit reduzieren
Daten oder Storytelling
- Beziehungen aufdecken
- Veränderungen im Laufe der Zeit zeigen
- narrative Fortschritte erzeugen

Wenn keiner dieser Punkte zutrifft, animiere das Element nicht.

2. Bewegung muss dem Design dienen

Beginne nicht mit der Frage:

„Welche coole Animation kann ich hinzufügen?“

Beginne mit:

„Was soll der Benutzer in diesem Moment verstehen oder fühlen?“

Dann entscheide, ob Bewegung helfen kann.

Eine hochwertige Website hat normalerweise:

eine kleine Anzahl wichtiger Bewegungsmomente
einheitliches Easing
einheitliches Timing
einheitliche räumliche Richtung
zurückhaltende Mikrointeraktionen
durchdachte Scroll-Choreografie
klare Hierarchie
reaktionsschnelles Verhalten
Unterstützung für reduzierte Bewegung

Vermeide:

zufällige Einblendungen überall
identische Animation in jedem Abschnitt
übermäßigen Parallaxeffekt
ständig schwebende Objekte
unnötige Cursor-Effekte
permanente Hintergrundbewegungen
übermäßiges Hüpfen
Animation, die Interaktion verzögert
Animation, die den Inhalt schwerer lesbar macht

3. Bewegungshierarchie

Jede Website sollte eine Bewegungshierarchie haben.

Verwende vier Ebenen.

Ebene 1 — Globale / Hero-Bewegung

Wirkungsvolle Momente.

Beispiele:

Hero-Eingang
Logo-Enthüllung
Enthüllung der Hauptüberschrift
wichtige visuelle Enthüllung
Seitenübergang
anfängliche Komposition

Eigenschaften:

sorgfältig choreografiert
visuell unverwechselbar
tritt normalerweise einmal auf
kann fortgeschrittene Animation verwenden

Typische Dauer:

500–1200ms für einzelne Sequenzen
1000–2000ms für vollständige Choreografie

Ebene 2 — Abschnittsbewegung

Wird verwendet, um beim Scrollen einen Rhythmus zu etablieren.

Beispiele:

Abschnittseinblendung
Bildeingang
Texteinblendung
Kartengruppen
angeheftetes Storytelling
horizontale Scroll-Abschnitte

Eigenschaften:

geringere Intensität als Hero-Bewegung
normalerweise durch Viewport/Scroll ausgelöst
sollte nicht mit dem Inhalt konkurrieren

Typische Dauer:

400–900ms

Ebene 3 — Komponentenbewegung

Wird für Interaktionen verwendet.

Beispiele:

Buttons
Karten
Navigation
Dropdowns
Akkordeons
Modals
Tabs
Tooltips

Eigenschaften:

schnell
vorhersagbar
reaktionsschnell
häufig wiederholt

Typische Dauer:

120–350ms

Ebene 4 — Mikrobewegung

Kleine Details.

Beispiele:

Icon-Bewegung
Unterstreichung
subtile Skalierung
Deckkraftübergang
Indikatorbewegung
Lade-Feedback

Eigenschaften:

fast unsichtbar
niemals ablenkend
normalerweise CSS

Typische Dauer:

100–250ms

4. Bewegungs-Entscheidungsbaum

Bevor du eine Technologie auswählst, folge dieser Reihenfolge.

Entscheidung 1 — Kann CSS es lösen?

Verwende CSS für:

Hover
Fokus
aktive Zustände
einfache Eingangsanimationen
Deckkraft
Transformation
Farbübergänge
einfache Keyframes
einfache Schleifen
grundlegende Ladezustände

Bevorzuge CSS, wenn keine Laufzeit-Orchestrierung erforderlich ist.

Entscheidung 2 — Können native Browser-APIs es lösen?

In Betracht ziehen:

Web Animations API
View Transitions API
CSS-gesteuerte Scroll-Animationen
IntersectionObserver zum Auslösen von Logik

Verwende native APIs, wenn sie ausreichende Kontrolle bieten, ohne eine Abhängigkeit einzuführen.

Entscheidung 3 — Ist eine komplexe Choreografie erforderlich?

Verwende GSAP, wenn du Folgendes benötigst:

komplexe Zeitachsen
präzise Sequenzierung
Scroll-Scrubbing
Anheften
mehrere synchronisierte Elemente
SVG-Animation
FLIP-Übergänge
fortgeschrittene Interpolation
komplexe responsive Animationszustände

Verwende GSAP nicht nur, weil es verfügbar ist.

Entscheidung 4 — Handelt es sich um eine anwendungszustandsgesteuerte Animation?

Für React-Oberflächen, erwäge eine deklarative Bewegungsbibliothek, wenn du Folgendes benötigst:

Komponenten-Präsenz/-Austritt
Layout-Übergänge
Gesten
Federn
zustandsgesteuerte Varianten
interaktive Komponentenbewegung

Verwende den vorhandenen Bewegungsstack des Projekts, wenn einer existiert.

Führe keine zweite Animationsbibliothek ohne konkreten Grund ein.

Entscheidung 5 — Ist das visuelle Element selbst ein Animations-Asset?

In Betracht ziehen:

Lottie
Rive
SVG
Canvas
WebGL
Three.js

Verwende diese nur, wenn die visuelle Komplexität sie rechtfertigt.

5. Technologieauswahl-Matrix

Anforderung	Bevorzugte Lösung
Hover-Übergang	CSS
Button-Feedback	CSS
Fokus-Zustand	CSS
Einfacher Eingang	CSS
Einfacher Schleifenhintergrund	CSS
Einfaches Scroll-Reveal	CSS scroll-driven / IntersectionObserver
Scroll-Fortschritt	CSS scroll-driven
Seitenübergang	View Transitions API
Von JS gesteuerte DOM-Animation	Web Animations API
Komplexe Zeitachse	GSAP
ScrollTrigger-Choreografie	GSAP
SVG-Pfad-Animation	CSS / GSAP
Komplexe React-Zustandsanimation	Motion / vorhandenes React-Bewegungssystem
Layout-/Shared-Element-Übergang	View Transitions / FLIP
Vektor-Animations-Asset	Lottie / Rive
3D-Szene	Three.js / WebGL
Partikelsystem	Canvas / WebGL
Komplexe generative Visuals	Canvas / WebGL
Videogesteuerte Scroll-Erfahrung	Canvas/Video + GSAP oder natives Scrollen

6. Easing-Regeln

Easing kommuniziert physikalisches Verhalten.

Wähle Easing nicht zufällig.

In die Benutzeroberfläche eintreten

Verwende ease-out.

Das Element sollte sich schnell bewegen und sanft zur Ruhe kommen.

Beispiele:

cubic-bezier(.16, 1, .3, 1)
cubic-bezier(.22, 1, .36, 1)

Gut geeignet für:

Eingänge
Dropdowns
Modals
Menüs
erscheinende Karten

Die Benutzeroberfläche verlassen

Verwende ease-in.

Das Element beschleunigt weg.

Gut geeignet für:

Schließen von Dialogen
Ausblenden von Elementen
Verlassen der Navigation
Entfernen temporärer Inhalte

Bewegung zwischen zwei sichtbaren Zuständen

Verwende ease-in-out.

Gut geeignet für:

Layout-Änderungen
Shared-Element-Übergänge
Schieberegler
Neupositionierung
große räumliche Bewegungen

Hover / Mikrointeraktion

Verwende ein natürliches Ease oder ein kurzes ease-out.

Vermeide übertriebenes Easing.

Feder

Verwende Federn, wenn sich das Objekt physikalisch anfühlen soll.

Gut geeignet für:

ziehbare Elemente
interaktive Karten
Kippschalter
Gesten
verspielte Oberflächen

Vermeide Federn für:

ernsthafte Unternehmensschnittstellen
jeden Hover
große Seitenübergänge
wiederholte Navigationselemente

7. Easing-Anti-Patterns

Vermeide:

linear für UI-Bewegungen, es sei denn, die Bewegung ist von Natur aus kontinuierlich
übermäßiges Hüpfen
elastisches Easing bei professionellen Schnittstellen
große Überschwinger
zufälliges Easing pro Komponente
unterschiedliches Easing für visuell verwandte Elemente

Dieselbe Bewegungsfamilie sollte denselben Easing-Wortschatz verwenden.

8. Zeitsteuerungssystem

Erstelle Bewegungs-Token.

Beispiel:

:root {
  --motion-instant: 100ms;
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-medium: 360ms;
  --motion-slow: 600ms;
  --motion-dramatic: 900ms;
}

Dies sind Ausgangspunkte, keine absoluten Gesetze.

Passe an basierend auf:

Entfernung
visuellem Gewicht
Interaktionshäufigkeit
Komplexität
Viewport-Größe
Markenpersönlichkeit

Je größer die Bewegung, desto mehr Zeit kann erforderlich sein.

Jedoch:

Mache eine Animation niemals langsamer, nur weil das Element weiter reist.

Optimiere für wahrgenommene Reaktionsfähigkeit.

9. Verzögerung und Staffelung

Staffelung erzeugt Hierarchie.

Gut:

Augenbraue
↓
Überschrift
↓
Beschreibung
↓
CTA

Schlecht:

Alles beginnt genau zur gleichen Zeit.

Aber vermeide übermäßige Staffelung.

Typische Werte:

30–80ms    Mikro-Staffelung
60–120ms   Komponentengruppen
80–160ms   Hero-Typografie
100–200ms  dramatische Sequenzen

Verwende Staffelung, um Struktur zu kommunizieren, nicht um die Animation länger dauern zu lassen.

10. Hero-Animation-Muster

Eine typische Premium-Hero-Sequenz:

Hintergrund etablieren
Visuelles Element enthüllen
Augenbraue enthüllen
Überschrift enthüllen
Begleittext enthüllen
CTA enthüllen
Sekundäre Navigation/Detail enthüllen

Beispiel:

const tl = gsap.timeline({
  defaults: {
    ease: "power3.out"
  }
});

tl.from(".hero-visual", {
  opacity: 0,
  scale: 0.96,
  duration: 0.8
})
.from(".hero-eyebrow", {
  opacity: 0,
  y: 20,
  duration: 0.4
}, "-=0.4")
.from(".hero-title", {
  opacity: 0,
  y: 32,
  duration: 0.7
}, "-=0.25")
.from(".hero-copy", {
  opacity: 0,
  y: 20,
  duration: 0.5
}, "-=0.35")
.from(".hero-cta", {
  opacity: 0,
  y: 16,
  duration: 0.4
}, "-=0.25");

Kopiere diese Sequenz nicht blind.

Passe die Choreografie an die Komposition an.

11. Text-Animation

Text ist eines der wirkungsvollsten Bewegungselemente.

Verwende:

Wort-Enthüllungen
Zeilen-Enthüllungen
maskierte Enthüllungen
subtile vertikale Bewegung
Deckkraft + Transformation
Clip-Path
Zeichen-Animation nur, wenn gerechtfertigt

Bevorzuge Wort- oder Zeilen-Animation gegenüber zeichenweiser Animation.

Zeichen-Animation kann:

die Lesbarkeit verringern
visuelles Rauschen erhöhen
unseriös wirken
die Implementierungskomplexität erhöhen

Verwende Zeichen-Animation hauptsächlich für:

redaktionelle Erlebnisse
ausdrucksstarke Marken
Kampagnen
Hero-Aussagen
künstlerische Websites

12. Text-Masken-Muster

Bevorzugte Struktur:

<span class="line-mask">
  <span class="line">Deine Überschrift</span>
</span>

.line-mask {
  display: block;
  overflow: hidden;
}

.line {
  display: block;
  transform: translateY(110%);
}

Dann animieren:

gsap.to(".line", {
  y: "0%",
  duration: 0.8,
  stagger: 0.08,
  ease: "power3.out"
});

Die Maske verhindert, dass der Inhalt visuell aus der beabsichtigten Komposition entweicht.

13. Scroll-Reveal

Scroll-Reveals sollten den Benutzer nicht warten lassen.

Gut:

opacity: 0 → 1
Y: 16px → 0

oder:

opacity: 0 → 1
scale: .98 → 1

Vermeide:

Y: 300px → 0
rotation: 90deg → 0
scale: 0 → 1

für gewöhnliche Inhalte.

Scroll-Reveals sollten sich so anfühlen, als ob Inhalte verfügbar werden, nicht als ob Objekte über den Bildschirm fliegen.

14. Scroll-Choreografie

Bei der Erstellung scrollgesteuerter Erlebnisse, definiere:

Auslöser
Start
Ende
Fortschritt
Bewegung
Easing
Anheften
Scrubben
Austritt

Beispiel:

Auslöser: Hero-Abschnitt
Start: Abschnitt tritt in den Viewport ein
Ende: Abschnitt verlässt den Viewport
Fortschritt: Scroll-Position
Bewegung: Bildskalierung 1 → 1.12
Text: opacity 1 → 0
Hintergrund: translateY -5%

Erstelle keine Scroll-Animationen, ohne deren Beziehung zur Scroll-Position zu definieren.

15. Parallaxeffekt

Parallax sollte normalerweise subtil sein.

Bevorzugt:

5% – 15% relative Bewegung

Vermeide übermäßige Tiefe.

Guter Parallaxeffekt:

Vordergrund: 0%
Mittelgrund: 5%
Hintergrund: 10%

Schlechter Parallaxeffekt:

Vordergrund: 0%
Hintergrund: 80%

Großer Parallaxeffekt kann verursachen:

Desorientierung
Reisekrankheit
schlechte mobile Leistung
visuelle Instabilität

Stelle immer ein Verhalten für reduzierte Bewegung bereit.

16. Hover-Interaktionen

Hover sollte Aufforderungscharakter kommunizieren.

Gute Beispiele:

Button

.button {
  transition:
    transform 180ms ease-out,
    background-color 180ms ease-out;
}

.button:hover {
  transform: translateY(-2px);
}

Karte

.card {
  transition:
    transform 250ms cubic-bezier(.22,1,.36,1),
    box-shadow 250ms ease;
}

.card:hover {
  transform: translateY(-6px);
}

Bild

.card-image {
  transition: transform 500ms cubic-bezier(.22,1,.36,1);
}

.card:hover .card-image {
  transform: scale(1.04);
}

Halte Hover-Bewegungen klein.

17. Layout niemals unnötig animieren

Bevorzuge:

transform
opacity

gegenüber teuren layoutverändernden Eigenschaften, wenn möglich.

Vermeide kontinuierliches Animieren von:

width
height
top
left
margin
padding

wenn eine Transformation das gleiche visuelle Ergebnis erzielen kann.

Statt:

left: 0 → 100px;

bevorzuge:

transform: translateX(100px);

Statt Layoutabmessungen zu animieren, erwäge:

transform
scale
clip-path
Grid/Flex-Zustandsänderungen
View Transitions
FLIP

18. Leistung

Das Ziel ist eine reibungslose Interaktion, nicht eine willkürliche FPS-Zahl.

Untersuche immer:

lange Hauptthread-Aufgaben
Layout-Thrashing
übermäßige DOM-Arbeit
riesige Bilder
teure Filter
unnötiges JavaScript
zu viele gleichzeitige Animationen
übermäßige Unschärfe
große WebGL-Szenen
übermäßige Layer-Promotion

Bevorzuge compositor-freundliche Eigenschaften.

Typische bevorzugte Eigenschaften:

transform
opacity

Sei vorsichtig mit:

filter
clip-path
box-shadow
background
width
height
top
left

Dies bedeutet nicht, dass diese Eigenschaften verboten sind.

Es bedeutet, dass ihre Rendering-Kosten verstanden werden müssen.

19. `will-change`

Füge NICHT blind hinzu:

will-change: transform;

zu allem.

Verwende es nur, wenn es einen konkreten Leistungsgrund gibt.

Vermeide dauerhafte Layer-Promotion von Dutzenden oder Hunderten von Elementen.

Wenn du es verwendest:

.animated-element {
  will-change: transform;
}

wende es eng begrenzt an und entferne es, wenn es angebracht ist.

20. React / Next.js-Regeln

Wenn du mit React oder Next.js arbeitest:

vermeide es, layoutverändernde Eigenschaften direkt in Komponenten zu animieren
bevorzuge CSS-Übergänge für einfache Zustände
verwende Motion (oder eine vorhandene deklarative Bibliothek) für komplexe zustandsgesteuerte Animationen
vermeide direktes DOM-Manipulation in React (es sei denn, es ist klar gerechtfertigt)
respektiere prefers-reduced-motion immer auf der obersten Ebene und innerhalb von Komponenten
lagere komplexe Animationslogik in einen benutzerdefinierten Hook oder eine Dienstprogrammfunktion aus
verwende useMemo und useCallback für Animationskonfigurationen, um unnötige Neurenderings zu vermeiden

21. Barrierefreiheit

Bewegung muss allen Benutzern dienen.

Respektiere prefers-reduced-motion.

Eine reduzierte Bewegung bedeutet nicht

no animation:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Erwäge stattdessen:

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    transition: none;
  }
  
  .entrance {
    opacity: 1;
    transform: none;
  }
}

Eine wirksame barrierefreie Strategie könnte Folgendes beinhalten:

Parallaxe deaktivieren
automatische Bewegung deaktivieren
Scroll-Animationen in statische Zustände umwandeln
Bildschirmleseprogrammen erlauben, mit Animationen umzugehen
Bewegungseingenschaften nie zu blinzeln oder schnellen Wechseln verwenden
ausreichenden Kontrast für animierte Elemente bereitstellen

22. Qualitätskontrolle

Bevor du eine Animation als abgeschlossen betrachtest, überprüfe:

23. Implementierung

Implementiere Animationen als eigenständige Komponenten oder Helfer, nicht als lose Codeteile.

Ziehe die Erstellung eines Bewegungssystems in Erwägung, das Folgendes umfasst:

Easing-Konstanten
Zeitsteuerungs-Token
einen Stagger-Helfer
Scroll-Trigger-Konfigurationen
einen barrierefreien Wrapper
einen Leistungsmonitor
wiederverwendbare Muster (Text, Karten, Bilder)

24. Kommunikation mit nicht-technischen Teammitgliedern

Erkläre Animation mit visuellen Referenzen.

Verwende:

Laufende URLs
Screen-aufnahmen
Framing-Diagramme
Easing-Kurven-Visualisierungen
Zeitachsen-Diagramme

Erkläre, warum langsame Animationen auf Websites verwirrend sein können.

Erkläre, warum Barrierefreiheit wichtig ist.

Erkläre, warum übermäßige Animation die Leistung und Benutzerfreundlichkeit beeinträchtigt.

In Ihrer bevorzugten KI fragen

Dokumentation

Premium Web Motion Design

Rolle

1. Kernphilosophie

Die Hauptregel

2. Bewegung muss dem Design dienen

3. Bewegungshierarchie

Ebene 1 — Globale / Hero-Bewegung

Ebene 2 — Abschnittsbewegung

Ebene 3 — Komponentenbewegung

Ebene 4 — Mikrobewegung

4. Bewegungs-Entscheidungsbaum

Entscheidung 1 — Kann CSS es lösen?

Entscheidung 2 — Können native Browser-APIs es lösen?

Entscheidung 3 — Ist eine komplexe Choreografie erforderlich?

Entscheidung 4 — Handelt es sich um eine anwendungszustandsgesteuerte Animation?

Entscheidung 5 — Ist das visuelle Element selbst ein Animations-Asset?

5. Technologieauswahl-Matrix

6. Easing-Regeln

In die Benutzeroberfläche eintreten

Die Benutzeroberfläche verlassen

Bewegung zwischen zwei sichtbaren Zuständen

Hover / Mikrointeraktion

Feder

7. Easing-Anti-Patterns

8. Zeitsteuerungssystem

9. Verzögerung und Staffelung

10. Hero-Animation-Muster

11. Text-Animation

12. Text-Masken-Muster

13. Scroll-Reveal

14. Scroll-Choreografie

15. Parallaxeffekt

16. Hover-Interaktionen

Button

Karte

Bild

17. Layout niemals unnötig animieren

18. Leistung

19. will-change

20. React / Next.js-Regeln

21. Barrierefreiheit

22. Qualitätskontrolle

23. Implementierung

24. Kommunikation mit nicht-technischen Teammitgliedern

25. Lernressourcen

Verwandte Skills

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

19. `will-change`