yuzhang-ai/web-animation-skill

Web-Animation

Gute Web-Bewegung ist zuerst eine Designentscheidung und erst dann ein Bibliotheksaufruf. Befolgen Sie den untenstehenden Workflow in der angegebenen Reihenfolge; laden Sie Regeldateien nur, wenn ein Schritt sie benötigt.

Workflow

1. Lesen Sie das Projekt, bevor Sie etwas auswählen

• Überprüfen Sie package.json. Wenn eine Animationsbibliothek bereits installiert ist, verwenden Sie diese. Fügen Sie für einen einzelnen Effekt keine zweite hinzu.
• Notieren Sie sich das Framework (React / Next.js App Router / Vue / Svelte / reines HTML) und ob Komponenten serverseitig gerendert werden (in Next.js ist "use client" für clientseitige Bewegung erforderlich).
• Suchen Sie nach vorhandenen Bewegungs-Tokens (Dauern, Easing-Kurven) in CSS-Variablen oder einer Theme-Datei und verwenden Sie diese wieder.

2. Entscheiden Sie, wofür die Bewegung gedacht ist

Jede Animation braucht eine Aufgabe. Wählen Sie eine pro Element:

Aufgabe	Beispiel	Typisches Budget
Feedback – eine Aktion bestätigen	Tastendruck, Umschalten, In-die-Zwischenablage-kopieren	100–200 ms
Orientierung – zeigen, woher etwas kam oder wohin es geht	Modal öffnet sich von seinem Auslöser, Listenelement wird neu angeordnet, Routenwechsel	200–400 ms
Aufmerksamkeit – auf eine Sache lenken	eine einzelne Hero-Sequenz, eine neue Benachrichtigung	400–1200 ms, einmalig
Erzählung – eine an den Scroll gekoppelte Geschichte erzählen	fixierte Produkt-Walkthrough, gescrubbte Zeitleiste	an die Scroll-Entfernung gekoppelt

Wenn ein Element keine Aufgabe hat, animieren Sie es nicht. Ein orchestrierter Moment schlägt ein Aufblenden in jedem Abschnitt. Lesen Sie rules/motion-design.md für Dauern, Easing, Choreografie und die Checkliste für "hochwertiges Gefühl".

3. Wählen Sie das leichteste Werkzeug, das die Aufgabe erfüllt

Zuerst die Plattform, dann die Bibliotheken:

Bedarf	Greifen Sie zu	Regeldatei
Hover, Fokus, Drücken, einfache Schleifen	CSS-Übergänge / @keyframes	css-keyframes.md
Dialog, Popover, Dropdown: Eintritt und Austritt	CSS @starting-style + transition-behavior: allow-discrete	css-keyframes.md
Seiten-/Routen-Übergänge, Shared-Element-Morphing zwischen Zuständen	View Transitions API	view-transitions.md
Einfaches scroll-verknüpftes Einblenden, Fortschrittsbalken, Parallax	CSS animation-timeline: view() / scroll()	scroll-animations.md
Fixierte Abschnitte, gescrubbte mehrschrittige Zeitleisten, horizontales Scrollen	GSAP + ScrollTrigger	gsap.md
Split-Text-/Linien-Mask-Headline-Enthüllungen	GSAP SplitText	gsap.md
React Eintritt/Austritt, Layout- und Shared-Layout-Animation, Gesten	Motion for React (motion/react)	framer-motion.md
Framework-freie imperative Animation, Federn	Motion (motion)	motion-one.md
SVG-Linienzeichnung und Morphing ohne GSAP	Anime.js v4 (svg.createDrawable, svg.morphTo)	animejs.md
Komplexes Pfad-Morphing zwischen unzusammenhängenden Formen	Flubber (oder GSAP MorphSVG)	flubber.md
After Effects Animationswiedergabe	Lottie (dotLottie)	lottie.md
Interaktive, zustandsgesteuerte illustrierte Animation	Rive	rive.md
Animierte Diagramme	D3-Übergänge	d3.md
Viele interaktive 2D-Formen (Editoren, Diagramme)	Konva	konva.md
3D, Partikel, Shader	Three.js / React Three Fiber	three-js.md

Wenn die Wahl nicht offensichtlich ist, lesen Sie rules/choosing-library.md.

4. Bauen Sie es mit den nicht verhandelbaren Grundsätzen

Diese gelten für jede Animation in jeder Bibliothek:

1. Animieren Sie transform und opacity. Vermeiden Sie das Animieren von width, height, top, left, margin; verwenden Sie scale/translate, FLIP (GSAP Flip, Motion layout) oder View Transitions für Layoutänderungen. Siehe rules/performance.md.
2. Respektieren Sie prefers-reduced-motion. Ersetzen Sie Bewegung durch einen Deckkraft-Übergang oder eine sofortige Änderung; verstecken Sie niemals einfach den Inhalt des Eintritts, sodass er unsichtbar bleibt. Scroll-gescrubbte Effekte sollten statisch werden.
3. Verstecken Sie niemals Inhalte, bis JS läuft. Setzen Sie den anfänglichen versteckten Zustand in JS (oder hinter einer .js-Klasse), sodass der Inhalt sichtbar ist, falls das Skript fehlschlägt. Vermeiden Sie bei SSR ein Aufblitzen von sichtbaren und dann versteckten Inhalten, indem Sie anfängliche Stile vor dem ersten Paint anwenden.
4. Räumen Sie auf. Machen Sie Animationen beim Aushängen rückgängig oder beenden Sie sie (useGSAP, createScope().revert(), gsap.context), und beenden Sie ScrollTrigger bei Routenwechseln.
5. Halten Sie die Interaktion reaktionsschnell. Unterbrechbare Animationen für alles, was vom Benutzer ausgelöst wird: Ein zweiter Klick darf sich nicht hinter dem ersten anstellen. Blockieren Sie niemals die Eingabe, während Sie auf das Ende einer Animation warten.
6. Animieren Sie den Fokus nicht weg. Elemente, die sich bewegen, müssen einen sichtbaren :focus-visible-Zustand behalten, und animierte Dialoge müssen den Fokus weiterhin korrekt setzen.

5. Überprüfen Sie in einem echten Browser

Melden Sie eine Animation nicht als erledigt, nur weil Sie den Code gelesen haben. Führen Sie sie aus und überprüfen Sie:

• Sie wird abgespielt, und der Endzustand entspricht dem Design (Screenshot während der Animation und im Ruhezustand).
• Keine Konsolenfehler, kein Layout-Shift beim Start.
• Emulieren Sie prefers-reduced-motion: reduce und bestätigen Sie, dass die reduzierte Version funktioniert und der Inhalt sichtbar ist.
• Ändern Sie die Größe auf eine mobile Breite: Fixierte Abschnitte und geteilter Text funktionieren noch (bei Größenänderung neu teilen).
• Scrollgesteuerte Effekte funktionieren sowohl beim Aufwärts- als auch beim Abwärtsscrollen und nach einem Neuladen mitten auf der Seite.
• Performance-Panel: Keine langen Frames während der Animation, keine Layout-/Paint-Spitzen durch animierte Eigenschaften.

Minimale Startpunkte

// GSAP + ScrollTrigger (npm i gsap)
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

gsap.from(".card", {
  y: 40, opacity: 0, duration: 0.8, ease: "expo.out", stagger: 0.08,
  scrollTrigger: { trigger: ".cards", start: "top 80%" },
});

// Motion for React (npm i motion)
import { motion, AnimatePresence } from "motion/react";

<AnimatePresence>
  {open && (
    <motion.div
      key="panel"
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 8 }}
      transition={{ type: "spring", duration: 0.35, bounce: 0 }}
    />
  )}
</AnimatePresence>

/* Plattform-natives Scroll-Einblenden: Chrome 115+, Safari 26+, Firefox 159+ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes reveal { from { opacity: 0; translate: 0 2rem; } }

Regeldateien

• rules/motion-design.md — Dauern, Easing, Choreografie, was Bewegung hochwertig wirken lässt
• rules/choosing-library.md — Entscheidungsablauf, Fähigkeitsmatrix, gemessene Bundle-Größen
• rules/performance.md — Compositor-only-Eigenschaften, Profiling, will-change, reduzierte Bewegung
• rules/scroll-animations.md — CSS-Scroll-Zeitleisten, ScrollTrigger-Muster, sanftes Scrollen
• rules/view-transitions.md — selbstdokumentierende und seitenübergreifende Seitenübergänge
• rules/css-keyframes.md — Übergänge, @keyframes, @starting-style, linear()-Easing
• rules/gsap.md — Zeitleisten, ScrollTrigger, SplitText, Flip, useGSAP
• rules/framer-motion.md — Motion for React: Varianten, AnimatePresence, Layout, Gesten
• rules/motion-one.md — Motion vanilla JS: animate, Sequenzen, scroll, inView
• rules/animejs.md — Anime.js v4: Zeitleisten, Staffelung, SVG-Zeichnung und Morphing
• rules/lottie.md — dotLottie-Player, Steuerelemente, Ereignisse
• rules/rive.md — Zustandsautomaten und Eingaben
• rules/d3.md — Daten-Join-Übergänge
• rules/flubber.md — Pfad-Morphing
• rules/konva.md — Canvas-2D-Formen und Tweens
• rules/three-js.md — Szenen, R3F, Leistung

Arbeitsbeispiele dieser Techniken befinden sich in demos/.