martinholovsky/gsap

Was macht gsap?

GSAP-Animationen für JARVIS-HUD-Übergänge und Effekte

Übersicht

Diese Fähigkeit bietet eine schnelle Integration der GreenSock Animation Platform (GSAP) für die Arbeit mit KI-Agenten, um dynamische und flüssige Heads-Up-Display (HUD) Animationen zu erstellen. Sie ist ideal für Entwickler, die mit Claude Code, Cursor, Codex oder ähnlichen Tools interaktive Benutzeroberflächen animieren möchten.

Funktionen

• Erstellung von Gleit-, Einblend- und Skalierungseffekten für HUD-Elemente
• Steuerung der Animationsabfolge mit GSAP-Timelines (gsap.timeline())
• Feineinstellung von Beschleunigungsfunktionen (easing) und Dauer
• GPU-beschleunigte Performanz für 60fps-Animationen
• Einfache Integration mit modernen Frontend-Frameworks wie React, Vue oder Svelte

Installation

Fügen Sie GSAP zu Ihrem Projekt hinzu:

npm install gsap

Oder verwenden Sie einen CDN-Link in Ihrer HTML-Datei:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Verwendung

Grundlegende Animation

import gsap from 'gsap';

// Ein Element sanft einblenden
gsap.from('.hud-element', { opacity: 0, y: 50, duration: 1, ease: 'power2.out' });

Timeline mit mehreren Schritten

const tl = gsap.timeline();
tl.to('.overlay', { opacity: 0.8, duration: 0.3 })
  .from('.panel', { x: 200, opacity: 0, duration: 0.5, ease: 'back.out(1.7)' })
  .to('.data-stream', { scale: 1.2, duration: 0.2, repeat: 3, yoyo: true });

Integration mit KI-Agenten (Beispiel: Claude Code)

// Nutzen Sie diese Fähigkeit in einem Prompt:
// "Erstelle eine GSAP-Animation für einen JARVIS HUD Overlay-Effekt"

import { gsap } from 'gsap';

function animateHUD() {
  const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power3.out' } });
  tl.from('.hud-container', { scale: 0.8, opacity: 0 })
    .from('.hud-heading', { y: -30, opacity: 0 }, '-=0.3')
    .from('.hud-panel', { x: 100, opacity: 0, stagger: 0.2 }, '-=0.4');
  return tl;
}

// Agent kann dies aufrufen, um die Animation zu triggern
export { animateHUD };

Unterstützte Plattformen

• Claude Code (Desktop)
• Cursor
• Codex CLI
• Andere KI-gestützte Entwicklungsumgebungen

Hinweise

• Stellen Sie sicher, dass GSAP in Ihrer package.json enthalten ist, wenn Sie es mit npm verwenden.
• Verwenden Sie gsap.context(), um Animationen an React-Komponentenlebenszyklen zu binden (Cleanup).
• Für komplexe HUD-Effekte können Sie gsap.utils Helfer wie random() oder mapRange() nutzen.

Lizenz

MIT