Scroll-Animationen mit KI + Claude Code

Der komplette Weg von der Idee zur fertigen Scroll-Animation auf deiner Website. Keine Zeile Code selbst schreiben. In unter 10 Minuten.

Unten findest du zuerst die Kurzanleitung, dann den fertigen Prompt zum Kopieren.

Die Anleitung (7 Schritte)

Claude nach Ideen fragen. Beschreib deine Website oder die Sektion und frag: “Gib mir Ideen für eine coole Scroll-Animation zu [Thema].”
Idee in fünf Abschnitte unterteilen. Nimm eine Idee und lass sie von Claude in fünf klare Stationen aufteilen (Anfang bis Ende). Das sind die fünf Frames deiner Animation.
Fünf Frames erstellen. Geh auf Google Flow und generier zu jedem der fünf Abschnitte ein Bild (Frame 1 bis 5).
Im “Zutaten”-Modus animieren. Wechsel in den “Zutaten”-Modus, wähl das Modell Omni Flash, leg alle fünf Frames als Zutaten rein und lass sie animieren. Ergebnis: ein flüssiges Video über alle fünf Stationen (statt nur Anfang und Ende).
Frames als ZIP herunterladen. Lad das Video runter und geh auf ezgif.com. Video hochladen, “Video to Frames” (bzw. Frames splitten), die ZIP-Option aktivieren und die Frames als ZIP-Datei herunterladen.
Frames in den Projektordner legen. ZIP entpacken. Leg in deinem Projekt einen Ordner public an (falls nicht vorhanden) und darin einen Ordner frames. Alle Bilder kommen in public/frames.
Prompt einfügen. Öffne Claude Code in deinem Projekt und füg den Prompt von unten ein. Claude Code baut die komplette scroll-getriebene Animation aus deinen Frames. Fertig.

Der Prompt (kopieren und in Claude Code einfügen)

Ich habe in meinem Projekt im Ordner public/frames eine nummerierte Bildsequenz
liegen (z. B. frame-001.jpg, frame-002.jpg ... oder 001.png, 002.png ...). Alle
Bilder zusammen ergeben eine Animation.

Baue mir daraus eine scroll-getriebene Animation ("Scroll-Scrubbing", wie auf den
Apple-Produktseiten): Beim Runterscrollen wird die Bildsequenz Frame für Frame
abgespielt, beim Hochscrollen rückwärts.

Anforderungen:
1. Lies automatisch alle Bilder aus public/frames, numerisch sortiert. Erkenne das
   Namensschema selbst (egal ob frame-001.jpg, 001.png oder 1.webp).
2. Preloade alle Frames, bevor die Animation startet, und zeig solange einen kurzen
   Ladezustand.
3. Zeichne die Frames auf ein <canvas>, das den ganzen Bildschirm ausfüllt (cover,
   ohne Verzerrung, scharf auf Retina - devicePixelRatio berücksichtigen).
4. Pinne den Animations-Abschnitt und verknüpfe den Scroll-Fortschritt linear mit
   dem Frame-Index (erster Frame am Anfang, letzter Frame am Ende). Nutze GSAP
   ScrollTrigger mit scrub: true.
5. Performance: nur neu zeichnen, wenn sich der Frame ändert; keine Layout-Thrashes;
   sauber aufräumen.
6. Responsive und auf dem Handy flüssig. Bei prefers-reduced-motion zeig einfach das
   letzte Bild statisch.
7. Wenn GSAP / ScrollTrigger noch nicht installiert ist, sag mir den genauen Befehl
   bzw. den CDN-Einbau.

Gib mir den vollständigen, lauffähigen Code und sag mir kurz, in welche Datei ich
was einfüge.

Kleine Tipps

Mehr Frames = flüssigere Animation, aber größere Ladezeit. Fünf reichen für die meisten Effekte; für besonders smoothe Bewegung kannst du das Video vor dem Splitten mit höherer FPS exportieren.
Halte die Bilder gleich groß (gleiches Seitenverhältnis), sonst springt die Animation.
Wenn die Frames zu schwer laden: als .webp exportieren statt .jpg.

Gebaut mit Claude Code. Wenn du so eine Website komplett fertig willst, schreib mir einfach eine DM.