Claude kann den Code hinter einem Motion-Video in Minuten schreiben. Diesen Code auf einer Live-Website in jedem Browser und auf jedem Gerät zuverlässig am Laufen zu halten, ist der schwierigere Teil. Mit Claude + GSAP erhalten Sie Animationen per Prompt, gestützt auf robusten Code, den Sie mit Zuversicht einsetzen können.
Am Montag, dem 28. September, hat GSAP zum ersten Mal die Marke von 1 Million täglichen Downloads auf npm überschritten. Es war ein aufregender Moment für das GSAP-Team, und er fiel auf den Beginn einer ungewöhnlichen Woche. Die wöchentlichen Downloads wachsen normalerweise um wenige Prozent. In der Woche des 27. September waren es knapp über 7 Millionen Downloads, fast 50 % mehr als Ende August.
Es dauerte nicht lange zu begreifen, was los war: Das Internet erlebte einen kleinen Animations-Moment. Anthropic hatte Claude Opus 5.5 veröffentlicht, und es ist ziemlich gut in Motion. Wir wurden in Hunderten von Beiträgen markiert, den üblichen Web-Demos, aber auch in einer riesigen Menge an Videos. Das war neu. Wie kamen die Leute also an Videos aus einem Chatbot?
Nun, Claude kann tatsächlich keine Videos erzeugen. Es tut, worin es am besten ist: Es schreibt Code. Es baut die Szene mit Webtechnologien wie HTML, SVG und Canvas, mit Three.js für alles in 3D, und schreibt Code, um alles zu animieren. Ein Headless-Browser geht die Animation dann Bild für Bild durch, und ffmpeg fügt diese Frames zu einem MP4 zusammen. Die Video-Ausgabe ist also in Wahrheit eine Webseite unter der Haube.
Videos erstellen vs. fürs Web bauen
Wenn Sie im Code herumstöbern, fällt Ihnen bei der Video-Ausgabe vielleicht etwas auf: Claude nutzt nicht immer eine Animationsbibliothek, es sei denn, ein bestimmtes Tool wird per Prompt vorgegeben. Oft baut es seine eigene Engine. Für ein Video ist das meist in Ordnung. Es läuft einmal, in einem Browser, in einer Größe, und wird dann in Pixel gebacken. Wenn es beim Rendern richtig aussieht, sind Sie fertig. Doch das Web ist nicht so einfach. Websites müssen auf allen möglichen Geräten, in allen Browsern und bei allen Verbindungsgeschwindigkeiten funktionieren, und sie müssen weiter funktionieren, über Browser-Updates und Code-Änderungen hinweg.
Claude kann Animationscode in Sekunden schreiben, doch jemand muss sich um diesen Code kümmern, sobald er live ist. Genau das nimmt Ihnen eine Animationsbibliothek ab. Wenn ein Browser einen neuen Bug ausliefert, ist es Sache des Bibliotheksteams, ihn zu beheben, nicht Ihre, und die nächste Person (oder der nächste Agent), die Ihr Projekt öffnet, muss keine selbstgebaute Engine entschlüsseln. Sie finden Dokumentation, Beispiele und eine Community, auf die sie sich stützen können.
Eigene Motion-Videos erstellen
Der Prompt, der diesen Trend ausgelöst hat, lautete schlicht
Ich habe Opus die GSAP-Brand-Assets und eine Brand-Guideline-Datei gegeben und per Prompt angewiesen
Es ist unbestreitbar ein beeindruckender Sprung in den Fähigkeiten. Ich kann verstehen, warum Social Media von Leuten überflutet wurde, die ihre Experimente posteten.
Wenn Sie etwas mehr Kontrolle über das Ergebnis möchten, gibt es einen weiteren Weg: HyperFrames. Es ist HeyGens Open-Source-Framework, um HTML in Video zu verwandeln. Es bietet eine getestete Pipeline, die jedes Mal gleich rendert, plus Live-Vorschau, ein CLI und Extras wie Untertitel, Voiceover und fertige Blöcke. Dazu kommen Skills für Claude Code, die ihm die Konventionen vorab beibringen, sodass Claude seine Energie (und Tokens) auf die kreative Arbeit statt auf den technischen Unterbau verwendet.
Verbessern Sie Ihre GSAP-Skills
Wenn Sie mit GSAP animieren, lassen sich Ihre Fähigkeiten direkt aufs Web übertragen, insbesondere diese Skills. Wir haben sie geschrieben, um Claude (und vielen anderen Agenten) das beizubringen, was Webanimation in der Praxis tragfähig macht. Das bedeutet, gsap.matchMedia() zu nutzen, damit sich Animationen an unterschiedliche Bildschirmgrößen anpassen und Menschen respektieren, die reduzierte Bewegung aktiviert haben. Es bedeutet, Transforms statt Layout-Eigenschaften zu animieren, damit alles flüssig bleibt, und sicherzustellen, dass Sie Ihre Animation in JS-Frameworks sauber aufräumen. Es ist das knifflige Zeug, das man sonst auf die harte Tour lernt. Dank Webflow ist inzwischen auch jedes GSAP-Plugin kostenlos, probieren Sie also gleich Physics2D oder MorphSVG aus.
Wenn sich alles bewegt, fällt nichts mehr auf
Eine Woche nach diesem Montag mit einer Million Downloads sehen meine Feeds ganz anders aus. Jeder zweite Beitrag ist ein glattes Motion-Reel, und ich scrolle fast ohne hinzusehen daran vorbei. Das ist ein seltsames Gefühl, wenn man die meiste Zeit über Animation nachdenkt.
Jetzt, da alle in wenigen Minuten solchen Feinschliff produzieren können, ist ein guter Moment innezuhalten und sich zu erinnern, wofür Motion da ist. Gute Animation erfüllt eine Aufgabe. Sie lenkt den Blick, erklärt, wie zwei Ideen zusammenhängen, zeigt, dass sich etwas verändert hat, oder macht eine Oberfläche intuitiver.
Die gute Nachricht: Gespür für Motion lässt sich entwickeln, und es gibt brillante Leute, die ihr Wissen teilen. Hier sind ein paar meiner Favoriten:
- Emil Kowalskis Animations-Skills. Emils Design-Engineering-Philosophie, verpackt für Ihren Agenten. Eine großartige Möglichkeit zu lernen, warum sich manche Animationen richtig anfühlen und andere nicht.
- Material Designs Motion-Richtlinien. Eine durchdachte Aufschlüsselung, wie Motion Struktur und Bedeutung in einer Oberfläche vermitteln kann.
- Osmo. Eine Bibliothek wunderbarer, produktionsreifer Webanimationen zum Lernen und Bauen, entweder in individuellem Code oder in Webflow
- Made With GSAP. Wunderschöne Effekte mit strukturierten Walkthroughs. Perfekt zur Inspiration und für alle, die der Code neugierig macht.
