gsap
Erstelle professionelle GSAP-Animationen für Video
Das Erstellen von GSAP-Animationen für Video-Kompositionen erfordert präzises Timing und deterministische Ausführung. Diese Skill bietet umfassende GSAP-Dokumentation und sofort einsetzbare Effekte für HyperFrames, die es dir ermöglichen, sanfte, professionelle Animationen zu erstellen, ohne durch mehrere Ressourcen suchen zu müssen.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "gsap". Animiere .card-Elemente mit einem Stagger-Effekt, 0,1s Verzögerung zwischen jedem Card, die von links eingeblendet werden
Erwartetes Ergebnis:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
Verwendung von "gsap". Baue eine Timeline, bei der .logo zuerst eingeblendet wird, dann .headline nach oben gleitet, dann .subtitle eingeblendet wird, nachdem headline abgeschlossen ist
Erwartetes Ergebnis:
const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');
Verwendung von "gsap". Tippe 'Welcome' mit 12 Zeichen pro Sekunde mit Cursor '|', der zwischen durchgehendem und blinkendem Zustand wechselt
Erwartetes Ergebnis:
const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);
Sicherheitsaudit
Niedriges RisikoStatic analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.
Probleme mit hohem Risiko (2)
Probleme mit mittlerem Risiko (1)
Probleme mit niedrigem Risiko (2)
Risikofaktoren
⚡ Enthält Skripte (1)
📁 Dateisystemzugriff (1)
⚙️ Externe Befehle (1)
Qualitätsbewertung
Was du bauen kannst
Einblendungs-Animationen zu Video-Overlays hinzufügen
Erstelle Einblendungs-, Schiebe- oder Skalierungs-Animationen für Text-Overlays und UI-Elemente in Video-Kompositionen.
Audio-reaktive Visualisierer erstellen
Erstelle Canvas-basierte Audio-Visualisierer, die auf Musik oder Sprache in Video-Hintergründen reagieren.
Komplexe Multi-Step-Animationen sequenzieren
Koordiniere mehrere Animationen mit präzisem Timing unter Verwendung von GSAP-Timelines, Labels und Positionsparametern.
Probiere diese Prompts
Verwende GSAP, um das #hero-Element mit Einblendung und Verschieben nach oben um 100px zu animieren. Dauer 0,6s mit power2.out-Beschleunigung.
Erstelle eine GSAP-Timeline, die: 1) .title einblendet, 2) .subtitle 0,2s danach einblendet, 3) .button bei 0,5s einblendet. Verwende Positionsparameter, keine Verzögerung.
Erstelle einen Schreibmaschineneffekt für #message, der mit 10 Zeichen pro Sekunde tippt, mit einem blinkenden Cursor. Cursor sollte im Leerlauf blinken.
Rendere Audio-Frame [FRAME] mit Balken unter Verwendung des AUDIO_DATA.frames[0].bands-Arrays. Jedes Band wird auf ein Canvas-Rechteck abgebildet. Bass steuert Skalierung, Höhen steuern Deckkraft.
Bewährte Verfahren
- Verwende Transform-Eigenschaften (x, y, scale, rotation) anstelle von Layout-Eigenschaften für GPU-Beschleunigung
- Übergib Standardwerte an den Timeline-Konstruktor anstatt sie mit Verzögerung zu verketten, für bessere Lesbarkeit
- Speichere Tween- und Timeline-Rückgabewerte, wenn du die Wiedergabe programmatisch steuern musst
Vermeiden
- Animiere keine Breite, Höhe, top oder left, wenn Transforms denselben Effekt erzielen können
- Verkette Tweens nicht mit Verzögerung, wenn eine Timeline mit Positionsparametern sie besser sequenziert
- Erstelle keine Tweens für Elemente, die noch nicht im DOM vorhanden sind