ElvinEga/skills

Scroll-Animation

Ein Router in zehn Scroll-Animationsmuster. Alle Muster außer JOS basieren auf denselben React + Framer Motion-Primitiven — useScroll + useTransform (+ useSpring zum Glätten) — lies daher zuerst diese Datei für das gemeinsame mentale Modell und lade dann nur die Referenzdatei(en), die zu dem passen, was der Benutzer möchte.

Gemeinsames Mentales Modell (Framer Motion-Muster)

Nahezu jeder Effekt in diesem Skill folgt dem gleichen Skelett:

import { motion, useScroll, useSpring, useTransform } from "framer-motion";
import { useRef } from "react";

const containerRef = useRef<HTMLDivElement>(null);

const { scrollYProgress } = useScroll({
  target: containerRef,
  offset: ["start start", "end end"],
});

const smoothProgress = useSpring(scrollYProgress, {
  damping: 25,     // 20–30: höher = weniger Sprung
  stiffness: 200,  // 150–300: höher = straffer
  mass: 0.5,       // 0.5–0.8: niedriger = leichter/schneller
});

const someValue = useTransform(smoothProgress, [0, 1], [startVal, endVal]);

• Die Container-Höhe steuert Geschwindigkeit/Dramatik. Mehr vh = langsamer, kinoreicherer Scroll. Typischer Bereich: 150vh (flott) bis 400vh (meditativ).
• position: sticky; top: 0 fixiert den Inhalt am Viewport, während der hohe Container den nötigen Scroll-Raum zum Durchanimieren bietet.
• Umwickle rohes scrollYProgress immer mit useSpring — ohne wirkt die Bewegung roboterhaft/linear statt physisch.
• Multi-Element-Effekte (Stapel, Grids, Orbiter) geben jedem Element ein Fenster: start = index / total, end = start + 1 / total, dann bilde [start, end] (oder eine 5-Punkt-Glockenkurve für Peak-in-der-Mitte-Effekte) auf die Transformationen dieses Elements ab.
• Respektiere prefers-reduced-motion: Fallback auf ein statisches Layout oder einfaches Einblenden für Benutzer, die dies wünschen.

Ein Muster auswählen — Auswahlhilfe

Lies die passende Referenzdatei in references/ für den vollständigen Komponentencode, Varianten, kritische Regeln und eine Fehlerbehebungstabelle. Rate nicht aus dem Gedächtnis bei den Transform-Werten — die Referenzdateien enthalten abgestimmte, funktionierende Zahlen.

Benutzer fragt nach…	Lies diese Referenz
Karten, die sich beim Scrollen stapeln/festsetzen, generischer „Karten stapeln“, 3D-Kippstapel, mehrschichtiger Stapel, horizontaler Kartenstapel	references/scroll-stack.md
Speziell „Chronos-Stil“-Stapelung, aggressive filmische Kartenrücknahme mit wachsendem Schatten/Radius	references/chronos-scroll-stack.md
Mehrere Tiefenschichten mit unterschiedlichen Geschwindigkeiten, Hintergrund/Vordergrund bewegen sich unterschiedlich schnell, „verrückte“/dramatische Parallaxe, schwebende Akzentformen	references/insane-parallax.md
Apple-ähnlicher Hero-Zoom in ein Bild, Fokus-Unschärfe, überlagerte Texteinblendungen über einem zoombaren Bild, filmischer Produkt-Launch-Zoom	references/immersive-scroll-zoom.md
Galeriebilder, die beim Eintritt in den Viewport hineinzoomen, Produkt-Fokus-Zoom, Grid aus Bildern mit scrollgesteuerter Skalierung	references/image-zoom-scrolling.md
Bild teilt sich in Hälften/Quadranten und trennt sich, diagonales Zersplittern, Agentur-Portfolio-Reveal mit 3D-Kippung	references/image-split-3d.md
Umkreisende Elemente, kreisförmige Fortschrittsringe, radiale/spiralförmige Galerien, Text, der einem kreisförmigen Pfad folgt	references/circular-scroll.md
Karten/Kacheln, die beim Aktivwerden wachsen/skalieren, Glockenkurven-Grid-Erweiterung, Masonry-zum-Aufklappen	references/expanding-cards-scroll.md
Bild-für-Bild-Scrubbing, „Daumenkino“-Scroll, Canvas-Bildsequenzen, Produkt-Reveal-Video gebunden an die Scrollposition	references/scroll-image-sequences.md
Einfache Einblend-/Schiebe-/Zoom-Effekte, gestaffelte Einblendungen, KEINE Nutzung von React/Framer Motion oder explizit „JOS“	references/jos-animation.md

Falls die Anfrage mehrdeutig ist oder zu mehreren Mustern passen könnte (z. B. „mach den Hero-Bereich dynamischer beim Scrollen“), bevorzuge insane-parallax.md oder immersive-scroll-zoom.md für Hero-Bereiche und frage nur nach, wenn es wirklich unklar ist — ansonsten wähle das nächstliegende Muster und notiere die Annahme.

Übergreifende Regeln (gelten unabhängig vom Muster)

• Nur Framer Motion für jedes Muster außer JOS — kein GSAP, kein Vanilla-Scroll-Listener-Code, es sei denn, der Benutzer bittet explizit um eine Nicht-Framer-Motion-Implementierung.
• Spring-Standardwerte, die fast überall gut funktionieren: damping: 20–30, stiffness: 150–300, mass: 0.5–0.8. Jede Referenzdatei gibt die genauen abgestimmten Werte für dieses Muster an — verwende diese, wenn sie von den allgemeinen Standardwerten abweichen.
• willChange: "transform, opacity" auf animierten Elementen, um sie auf dem Compositor-Thread zu halten.
• z-Index-Logik für alles Gestapelte: normalerweise total - index, sodass frühere Elemente beim Zurückweichen oben liegen.
• Nicht überanimieren. 3–8 Karten/Frames/Layer sind normalerweise der Sweet Spot; mehr wird ermüdend oder schadet der mobilen Performance.
• Mobil: Skalierungsbereiche abmildern, Anzahl Layer/Frames reduzieren und whileInView gegenüber langen scrollgesteuerten Sequenzen bevorzugen, wo Dramatik nicht essenziell ist.

Muster kombinieren

Diese Muster lassen sich kombinieren. Eine Landing Page könnte insane-parallax für den Hero-Bereich, scroll-stack für einen Funktionsabschnitt und jos-animation für einfache gestaffelte Einblendungen an anderer Stelle derselben Seite verwenden. Lies jede relevante Referenzdatei unabhängig — sie hängen nicht voneinander ab, außer wo vermerkt (z. B. verweist scroll-stack.md für die vollständige filmische Variante auf chronos-scroll-stack.md).