Gsap

frontend-dev ist ein frontend-dev Skill zum Erstellen hochwertiger, produktionsreifer Webpages mit erstklassiger UI, cineastischer Motion, KI-generierten Medien, überzeugenden Texten und generativer Kunst. Verwende ihn für Landingpages, Marketingseiten, Produktseiten, Dashboards und andere Frontend-Aufgaben, bei denen Design, Inhalte und Implementierungsdetails eng aufeinander abgestimmt bleiben müssen.

gsap-frameworks ist das GSAP-Skill für Vue, Nuxt, Svelte, SvelteKit und andere Nicht-React-Frameworks. Es behandelt lifecycle-sichere Einrichtung von Animationen, scoped Selektoren und Cleanup beim Unmount, damit Komponentenanimationen in der Frontend-Entwicklung korrekt funktionieren.

gsap-performance ist die Performance-Skill für GSAP im Frontend-Development. Nutze sie, um Jank zu reduzieren, Layout Thrashing zu vermeiden, Transforms und Opacity zu bevorzugen, `will-change` sinnvoll einzusetzen und Reads und Writes zu bündeln – für flüssigere 60fps-Animationen. Am besten geeignet ist sie, wenn du praktische Anleitung zur Nutzung von gsap-performance für bestehenden Motion-Code brauchst.

gsap-react ist der offizielle GSAP Skill für React und Next.js. Er behandelt useGSAP(), refs, gsap.context(), scoped selectors und Cleanup, damit du React-sichere Animationen ohne Re-render- oder Unmount-Bugs bauen kannst. Nutze diesen gsap-react-Guide, wenn du Hilfe bei Installation und Anwendung für die Frontend-Entwicklung brauchst.

gsap-utils Skill für GSAP-Utility-Helper: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap und pipe. Erfahre, wie du gsap-utils im Frontend Development einsetzt, wann sich wiederverwendbare Funktionsformen lohnen, wie sich die Helper in Tweens und Callbacks einfügen und warum keine Registrierung nötig ist.

gsap-plugins hilft Frontend-Entwicklern dabei, GSAP-Plugins korrekt auszuwählen, zu installieren und einzusetzen. Abgedeckt werden Plugin-Registrierung, Imports sowie praxisnahe Hinweise zu ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG-Plugins, Easing-Tools und GSDevTools. Nutze es, wenn du statt allgemeiner Animationstipps einen klaren gsap-plugins-Leitfaden brauchst.

gsap-scrolltrigger ist der offizielle GSAP Skill für scrollgebundene Animationen, Pinning, Scrub-Verhalten und viewportbasierte Trigger. Nutze ihn für die Frontend-Entwicklung, wenn du einen gsap-scrolltrigger-Leitfaden, Hilfe bei der Installation oder praktische gsap-scrolltrigger-Anwendung für Parallax, fixierte Abschnitte und scrollgesteuerte Bewegung brauchst.

gsap-timeline hilft dir, GSAP-Timeline-Sequenzen mit geordneten Schritten, Überlappungen, Labels und verschachtelter Wiedergabe zu bauen. Verwende die gsap-timeline-Skill, wenn es darum geht, mehrere Animationen zu koordinieren – besonders für UI-Design, Onboarding-Flows oder wiederverwendbare Motion-Systeme. Sie enthält Installations- und Nutzungshinweise für gsap-timeline, damit die Abfolge klar und nachvollziehbar bleibt.

Das gsap-core-Skill ist der offizielle GSAP-Leitfaden für die Nutzung der Kern-Animations-API, einschließlich `gsap.to()`, `from()`, `fromTo()`, Easing, Stagger, Defaults und responsiver Bewegung. Verwenden Sie es für gsap-core in Vanilla JS, React, Vue, Svelte, DOM-, SVG- und UI-Design-Workflows – besonders dann, wenn Sie einen verlässlichen gsap-core-Leitfaden benötigen.

hyperframes-registry hilft dir, wiederverwendbare HyperFrames-Registry-Einträge mit weniger Rätselraten zu installieren und zu verdrahten. Nutze es, um `hyperframes add` auszuführen, Blöcke von Komponenten zu unterscheiden, Snippets zusammenzuführen, Blöcke in `index.html` einzubinden und den Pfadzuordnungen in `hyperframes.json` für Design-Implementierung und Registry-Erkennung zu folgen.

gsap ist eine praxisnahe Animationsreferenz für HyperFrames-Kompositionen. Sie hilft dir dabei, zwischen `gsap.to()`, `from()`, `fromTo()` und `gsap.timeline()` zu wählen und anschließend die passenden `vars`, `easing`, `stagger`, `transforms` und Performance-Muster einzusetzen. Nutze diesen gsap-Leitfaden, wenn du umsetzungsreife Motion-Animationen für Entrance-Animationen, Übergänge und wiederverwendbare Design-Effekte brauchst.

hyperframes ist eine Workflow-Skill zum Erstellen von HTML-basierten Videokompositionen in HyperFrames. Nutze sie für Title Cards, Overlays, Untertitel, Voiceovers, audio-reactive Motion und Szenenübergänge, wenn du strukturierte, code-first hyperframes für Videoediting brauchst. Der Fokus liegt stärker auf Layout, Timing und Animation als auf allgemeinen Prompt-only-Videoanfragen.

gpt-taste ist eine designorientierte Skill-Lösung für ausgefeilte UI-Seiten mit redaktioneller Art Direction, disziplinierter Abstandslogik und GSAP-Motion. Verwende den gpt-taste Skill für Marketingseiten, Landingpages und Showcase-Websites, wenn du mehr Layout-Vielfalt, präzisere Typografie-Kontrolle und weniger generische Frontend-Muster willst. Der Guide enthält Installations- und Nutzungshinweise für die praktische Umsetzung.

fixing-motion-performance hilft dabei, UI-Animationen auf Performance-Probleme zu prüfen und sie zu beheben, ohne deinen Stack standardmäßig zu ändern. Nutze es für Frontend-Arbeit, wenn Animationen ruckeln, scroll-gebundene Effekte teuer sind oder Übergänge Layout-, Paint- oder Compositing-Arbeit auslösen. Es macht aus Animationsfehlern klare, codebasierte Fixes.