MooT020/gsap-explainer

GSAP-Erklärvideo – die produzierte Video-Stufe

Erstellt ein eigenständiges HTML/SVG/GSAP-Erklärvideo, das wie ein produziertes YouTube-Video wirkt, keine Diashow: eine GSAP-Timeline pro Szene, die eine physikbasierte Choreografie steuert, ein persistentes fliegendes Host-Maskottchen, geschichtete Farbverlaufswelten mit Tiefe, bevölkerte Szenen, eine Vignetten-/Körnung-„Kamera“ und einen suchbaren Player. Verwende eine reine CSS-Hülle für kleine Einbettungen im Trichter; verwende DIESEN Skill für YouTube-würdige Inhaltsvideos.

Der Referenzbau ist scaffold.html – ein lauffähiges Beispiel mit 5 Szenen (Thema: „Wie Zinseszins explodiert“) mit jedem untenstehenden Muster im Kontext. Das Scaffold kommt ohne GSAP: Führe python3 inline-gsap.py scaffold.html einmal aus (holt GSAP 3.13 in ein .gitignore-geschütztes vendor/ und bettet es ein) und öffne die Datei – sie muss abspielen. Lies es, wenn ein Muster unten unklar ist.

Los geht's – der Weg, der nicht scheitern kann

1. Schreibe ZUERST das Shot-Skript als Markdown-Dokument: pro Szene – Zeitstempel, Dauer, VISUELLES, BILDSCHIRMTEXT, VO-Zeile. Endet mit einer Korrektheits-Checkliste und überprüfe jede darin gemachte Behauptung. Szenendauern werden zum SCENES-Array; VO-Zeilen werden zum sr-only-Transkript.
2. Kopiere scaffold.html nach <topic>.html. Es hat alle Fallstricke vorfixiert: Harness-Uhr, Such-Chrome, Host-Flüge, Welthintergründe, Kameraeffekte, Bevölkerungscharaktere, reduzierte Bewegung, Transkript. Führe inline-gsap.py darauf aus und öffne es, bevor du etwas anfasst – es muss abspielen.
3. Ersetze Szenen nacheinander, behalte die fünf Arbeitsbeispiele als deine Idiomquelle, bis jede ersetzt ist: S0 = dunkler Haken mit Flip-Reveal; S1 = Fallen-mit-Abprall-Physik; S2 = Gießen/motionPath-Flug + DrawSVG; S3 = der erzwungene Überlappungs-Kollisionsnachweis (das Spitzenmuster); S4 = CTA-Haltepunkt. Aktualisiere SCENES, FL, ACTS, CH_STARTS gemeinsam – sie sind parallele, nach Szenenindex geordnete Strukturen.
4. Führe QA für jede Szene mit Einzelbildern durch (siehe QA), korrigiere, dann veröffentliche (eigenständige Datei).

Schreibe niemals die Choreografie einer Szene von Grund auf, wenn ein untenstehendes Muster passt – passe das Muster an. So erreichst du das Niveau, unabhängig vom Modell.

Architekturvertrag (bereits im Scaffold verdrahtet)

• Feste 800×500-Bühne, auf Container skaliert (fitScale). Szenenuhr ist setTimeout (SCENES-Array, Sekunden pro Szene; letzter Eintrag 999 = CTA-Halt; advance() ruft done() darauf auf).
• Text/Chips/Beschriftungen erscheinen über CSS-Primitive (.fu fade-up, .pp pop, .fi fade-in) mit inline animation-delay – günstig und wiederholbar. Heldenchoreografie ist GSAP: runScene(i) (von showScene aufgerufen) killt die vorherige Timeline und baut gsap.timeline() aus FL[i] (Host-Flug) + ACTS[i] (Szenenakt) auf.
• Jedes ACTS[i] MUSS mit gsap.set(...)-Resets für alle berührten Elemente beginnen – Szenen werden bei Wiederholung/Suche reaktiviert und gekillte Tweens hinterlassen veraltete Inline-Stile.
• GSAP-eigene Elemente erhalten die Klasse g-hero (oder leben darin) und tragen niemals .fu/.pp/.fi – ein Besitzer pro Element.
• pause()/resume() rufen curTl.pause()/play() auf; die CSS-Seite wird durch die .paused-Klasse eingefroren. Navigation nimmt die Wiedergabe immer wieder auf (eine pausierte, frisch geschnittene Szene sitzt bei Deckkraft-0-Eingängen – niemals „suchen und pausiert bleiben“).
• Player: Klick-zum-Suchen auf dem Fortschrittsbalken (sceneAt(frac)), Vor-/Zurück-Buttons, ←/→-Tasten, Kapitelmarken (CH_STARTS), Autoplay beim Scrollen, automatische Pause bei Tab-Wechsel.
• Auslieferung ist die stille visuelle Spur (Master bleibt stumm); VO wird als separate <name>-vo.html-Vorschau-Variante mit der ElevenLabs-Pipeline ausgeliefert (siehe VO-Produktion). Das sr-only-Transkript IST das VO-Skript. Nachzeit auf eine Lesegeschwindigkeit = ERWEITERE SCENES[i] auf Clip+1,5–2s (Erweitern stranguliert nie Takte; nur Kürzungen tun das).

Die Musterbibliothek (anpassen, nicht erfinden)

Alle existieren wortwörtlich in scaffold.html – kopiere das nächstgelegene.

• Host-Flug – FL[i] = [[bruchteil, x, y, zeigen], ...]. Erster Wegpunkt = letzter der vorherigen Szene (nahtlose Schnitte). Lange Strecken fliegen automatisch über MotionPath (in fly()). Die Bleistiftspitze sitzt bei Akteur-Offset ≈ (−10, +95): Um auf ein Ziel zu zeigen, parke den Host oberhalb-rechts davon. Sende den Host von der Bühne (x=850), wenn eine Szene den Rahmen braucht.
• Fallen mit Gewicht – gsap.set(els,{y:-300,opacity:0}) dann .to(els,{y:0,opacity:1,ease:'bounce.out',stagger:.09}). Der Stagger + Bounce IST das Physikgefühl. (layMarbles packt Reihen im Behälter; Reihenbreite ist 168, nicht 180 – breiter und Tropfen fallen durch die Wand.)
• Erzwungener Überlappungs-Kollisionsnachweis (der Beweis-Gipfel) – zwei Balken fallen in eine Spur, die nicht beide halten kann; der zweite versucht auszuweichen (x yoyo), scheitert, beruhigt sich; das Überlappungssegment erscheint mit back.out und leuchtet (boxShadow yoyo repeat:-1); dann zwei beide-Abzeichen-Charakter-Minions erscheinen darin. Absicht → Scheitern → Konsequenz macht es lebendig.
• Gießen/Transformieren – Behälter rotiert (transformOrigin am Ausguss), Inhalt fliegt einzeln auf motionPath-Bögen ({path:[{x,y},{x,y}],curviness:1.6}, ease:'power1.in'), landet in einer Reihe, überblendet in die neue Form, gezeichnet mit DrawSVG.
• Flip-Reveal – ein verlockender ✓ erscheint (back.out(2.4)), wackelt, tauscht dann gegen das ✗, das einschlägt (scale:3→1, power4.out) + ein Hintergrundblitz (backgroundColor yoyo).
• Verlocken-dann-Zerstören – Antwort glüht/pulsiert (scale yoyo ×3), stirbt dann (opacity:.25, scale:.92, rotation:-3, power2.in); die richtige Antwort erscheint danach.
• Stempel-Einschlag – gsap.set(stempel,{opacity:0,scale:2.6,rotation:-14}) → .to({opacity:1,scale:1,rotation:0,duration:.35,ease:'power4.out'}).
• DrawSVG – gsap.set(path,{drawSVG:'0%'}) → .to({drawSVG:'100%'}); Zurückschnappen = auf 72% zeichnen dann schnell zurück. DrawSVG überschreibt stroke-dasharray – gestrichelte Linien werden beim Zeichnen durchgezogen dargestellt; gestalte entsprechend.
• Bevölkerung als Charaktere (der mit Abstand typischste Kurzgesagt-Schritt) – minion(size, badges) Minicharakter-Fabrik: Mengen sind kleine Charaktere, keine Punkte. Umgebender 3-Charakter-Schwarm auf 35–55s CSS-Loops; Gruppen enthalten ihren Charakter-Cast; der Beweismoment sind Charaktere, die beide Abzeichen tragen.
• Szenenschnitt-Wisch (in runScene eingebaut) – zwei geneigte Panels (Akzent führt, Tinte folgt .09s) wischen die Bühne bei jedem Schnitt. Lass es an; es ist der günstigste „echte Übergänge“-Gewinn. Szenenideen mit vielen Requisiten, die es wert sind, gestohlen zu werden: eine lebende Buchseite, eine Textmarkerruine, ein Aktenschrank, ein Messanzeiger, ein Fortschrittsbalken-Rennen.

Die kostenlose Plugin-Suite (GSAP 3.13 – ALLE kostenlos seit der Übernahme durch Webflow)

inline-gsap.py holt + bettet ein: Core + DrawSVG + MotionPath + MorphSVG, SplitText, Physics2D, PhysicsProps, CustomEase, CustomWiggle, CustomBounce, Flip, ScrambleText. Alles ist frei lizenziert. inline-gsap.py <datei> injiziert alles + einen registerPlugin-Block am <!--GSAP_INLINE-->-Marker; --refresh tauscht die Suite in einer bereits eingebetteten Datei. Bewährte Muster (alle im Scaffold vorhanden):

• SplitText Zeichenkaskade – teile EINMAL bei der Initialisierung über ein Register (splitOnce(key,sel) mit Caching in SPL{} – erneutes Teilen bei jeder Szenenwiederholung verschachtelt Spans). Auslöser: Zeichen aus {opacity:0,y:14}, Stagger .016, start ≤.15s. Heldenwort: Zeichen aus {y:-64,rotation:-9} mit back.out(1.9) stagger .07; oder {scale:2.7} power4 stagger .11 = Stempel-Einschlag. Szenen verstecken sich über opacity (nicht display:none), damit das anfängliche Teilen sicher ist.
• ScrambleText-Definitionssperre – eine Auszahlungszeile kratzt an ihren Platz: scrambleText:{text:'≥ 1',chars:'<>=~≠≤≥',speed:.6}. Bevorzuge JS \u-Escapes für Symbole in JS-Strings. Thematische Zeichensätze (Mathe-Symbole für Definitionen) lesen sich besser als 'upperCase' – ein langer, zufälliger Großbuchstaben-Scramble wirkt wie ein Ladefehler.
• CustomWiggle-Beruhigung – CustomWiggle.create('wigSettle',{wiggles:4,type:'easeOut'}), dann rotation:'+=10', ease:'wigSettle' – oszilliert und KEHRT ZURÜCK ZUM START, damit relative Werte nie über Wiederholungen akkumulieren. Verwende für: Stempel-Landungen, Charakterreaktionen, das Bleistifttippen des Hosts bei Ankunft (if(wp[i][3]&&!wp[i-1][3]) in fly()).
• CustomBounce Fallen mit Stauchen – CustomBounce.create('thud',{strength:.58,squash:2.4}) erstellt gepaarte Easing-Funktionen 'thud'+'thud-squash'. Der drop(tl,targets,time,dur,stagger)-Helfer führt 3 synchronisierte Tweens aus: Opacity-Pop, y mit 'thud', scaleX:1.45,scaleY:.55 mit 'thud-squash' (transformOrigin:'50% 100%' im Reset). Streng besser als bounce.out – das Stauchen IST das Gewicht.
• Physics2D-Ausbruch – burst(tl,scene,x,y,n,time,colors): Feier-/Trümmerpartikel, bei denen die Landung egal ist (Kollisionsgipfel, Siegesstempel). Index-gesäte Winkel/Geschwindigkeiten ((i*53)%140) = wiederholungsidentisch, kein Math.random. Entfernt veraltetes .pfx bei Wiedereintritt; Ausblenden vor Szenenende, damit nichts hängen bleibt.
• MorphSVG-Verschmelzung – der typischste Kurzgesagt-Schritt: N Objekte „werden“ das Konzept. Gegenstände landen in einer Reihe → ein Kapselpfad blendet über sie ein → morphSVG zur Pfeilsilhouette, während fill tweened („gleiche Objekte, neue Form“, wortwörtlich). Reset benötigt gsap.set(path,{morphSVG:URSPRUNGLICHES_D}) – ein gemorpheter Pfad behält seine mutierte d.
• Flip: NICHT hier – in einer festen 800×500-absolute-Koordinatenbühne kennst du immer das Delta; ein einfaches y:-Tween ist deterministisch unter tl.pause(t)-QA, während Flips Messung zur Laufzeit das Einzelbild-Scrubbing bricht (und Callbacks nicht bei unterdrückten Suchvorgängen feuern). Flip lohnt sich nur in echten Reflow-Layouts (DOM-gesteuerte Listen, responsive Container). Ein „beanspruche den freigewordenen Platz“-Moment ist ein bekanntes-Delta-Tween.

Requisitenhandwerk (10x-Pass-Muster – wie Props aufhören, wie gestylte Divs auszusehen)

Tiefer Einstieg: Die vollständige Asset-Generierungsdisziplin (Bauordnung, Fabriken, SVG-Verträge, Qualitätsgates) lebt im explainer-assets-Skill – verwende es, wenn du ein Asset ERSTELLST oder neu baust; dieser Abschnitt ist der Kurzreferenz.

• Das Ein-Rezept-Klebeetikett – Tiefe ausschließlich durch geschichtete box-shadow: harter Tinten-Tropfen unten-rechts (3px 3px 0 var(--ink)) + inset 0 2px 0 rgba(255,255,255,.3-.5) oberer Glanz + inset 0 -3px 0 rgba(0,0,0,.1) unterer Schatten + inset 0 0 0 1-2px rgba(255,255,255,.14) Stanzrand. Transluzente Insets reiten auf JEDER Hintergrundfarbe, also ein CSS-Durchlauf auf .xchip/.qbar/.stamp/.l3 span hebt jede Variante hervor, hell und dunkel. Halte einen Radius-Maßstab (sm 10 / base 13 / lg 16) und EINE Lichtrichtung (oben-links) filmweit.
• Zweiton-Jede-Fläche-Füllung – tausche background:rgba(...) gegen linear-gradient(180deg, heller, basis) + die Glanz-/Schatten-Insets. Semantische Farbe überlebt; die Fläche wirkt beleuchtet.
• Handwerklich gefertigtes Gefäß-Rezept (Eimer/Gläser/Becher) – Basis-Schatten-Ellipse → Gradient-Körper → 2 verjüngte Reifenbänder mit 1px weißem Highlight → Randring + eine DUNKLERE INNENÖFFNUNG-ELLIPSE (diese eine dunkle Ellipse macht eine Öffnung 3D lesbar) → weiche spekulare Kurve. Interpoliere Band-Endpunkte entlang der Trapezseiten.
• Handwerklich gezeichnete Linien in einem Selektor – statisches filter:drop-shadow(0 1.5px .5px rgba(0,0,0,.17)) auf allen gezeichneten Strichen gibt jedem Pfeil/Kästchen eine Zweiton-Unterseite und enthüllt SICH mit der DrawSVG-Animation (Filter ist unabhängig von dashoffset).
• Dekoriere GSAP-gesteuerte Props mit Pseudoelementen – ::before/::after (Linien, Klebestreifen, Risse, Meniskuslinien) reiten automatisch die Transformation der Timeline: null neue Choreografie, null Footprint-Änderung. Verfolge, welche Pseudos pro Klasse „besetzt“ sind – Kollisionen sind still.
• Fabrik-Charaktere: IDs nur auf Singletons – der Host (eine Instanz) darf uid-suffixierte Farbverläufe/Spekulare tragen; eine mehrfach eingebettete Fabrik (Minicharaktere) muss ID-FREI bleiben (nur einfache Füllungen) oder IDs duplizieren sich im Dokument.
• Behalte den Choreografie-Vertrag beim Neubau – erstelle ZUERST ein Selektoren-Inventar aus dem Skript; Positionsselektoren sind Minen (.bkt3 path = ERSTER Pfad muss der getwenterte Körper bleiben – führe mit Ellipsen, nicht Pfaden). Neue dekorative Transformationen kommen auf Wrapper-<g>s.
• Textsicherer Glanz-Hinweis – auf Chips mit SplitText/Helden-Text muss Glanz inset box-shadow sein (Farbe UNTER Text), niemals ein positionierter ::before-Overlay (malt ÜBER die Zeichen und verdunkelt sie).
• Papierstapel + Knick-Ecken-Rezept (jedes Blatt-Prop) – 2 versetzte Hintergrund-Rechtecke (±0,6–1,5° Rotation, dunkleres Creme, overflow:visible auf dem SVG), eckgeschnittener Schatten-Dreieck + gefaltete Lasche, eine Randlinie, oben-links Glanzpfad. Footprint unverändert, nur visuelles Ausbluten.
• Schublade/Möbel-Frontkit – Front-Rechteck + oberer Glanzstreifen + Etikettenplatte + versenkte Griffleiste + Zwischen-Einheit Tiefenschattenlinie; parametrisiere Palette für die hervorgehobene Einheit, behalte ihre Animationsklasse.
• Zweiton-Vektorwolke – getönte Basisellipse + 3 überlappende weiße Kreise + eine hellere obere Ellipse; färbe die Basistönung pro Stimmungsvariante um.
• Blaupausen-Karten-Overlay – absolut positioniertes Kind-SVG (schwach getöntes Raster + 4 Eckhäkchen) als erstes Kind einer Karte: technische Zeichnungs-Textur mit null Effekt auf die Tween-Klasse oder das Text-Kind der Karte.

Die Filmschicht (Kurzgesagt-Pass-Muster)

• Kamera-Rig #xplCam – ein reiner Inhalts-Wrapper INNERHALB von #xplStage, der die Szenen hält (Umgebungsschichten, Akteur, Vignette/Körnung bleiben außerhalb). Pro Schlag: Hereinfahren bei Auszahlungen (~1,02–1,05, transformOrigin beim Helden), Herausfahren bei Enthüllungen, Scale auf 1 in runScene bei jedem Schnitt. Skaliere niemals #xplStage selbst – das ist fitScale's Aufgabe. Die Höhepunktszene verdient EINEN ununterbrochenen langsamen Kriechgang über ihren gesamten Akt. Überprüfe das Beschneidungsrisiko gegen die SICHTBAREN Pillen-/Prop-Grenzen, nicht gegen vollbreite Container.
• Host-Schauspielgriff actorBody – .xpl-actor > [data-host] div, unabhängig von fly() (äußeres x/y) und armEl. Helfer: Hüpfer (y-8 yoyo), Neigen (±4° in Richtung des gezeigten Ziels), Erschrecken (Rückstoß+Neigen), 360°-Drehung beim größten Sieg. Setze jeden Schnitt zurück. Minicharakter-Eingangspersönlichkeit: Spähen von hinter einer Kante (x-Offset → 0) VOR dem Pop.
• Auszahlungslicht – ein gemeinsames #xplGlow weichgezeichnetes radiales (mix-blend-mode:screen, Tönung via CSS-Variable), positioniert + aufgeblüht hinter dem Helden-Objekt beim größten Beat jeder Szene, pro Schnitt zurückgesetzt. Sofortiges „beleuchtetes“ Gefühl für ~15 Zeilen.
• Tageszeit-Drift – säe einen Basis-filter auf #envFar bei der Initialisierung (damit Tweens interpolieren, nie von none springen), dann erweiche Helligkeit/Farbton

...

[Truncated for translation]