Gsap Performance
Skill Verifiziert AktivOffizielle GSAP-Fähigkeit für Leistung — bevorzugt Transformationen, vermeidet Layout-Thrashing, `will-change`, Batching. Verwenden Sie diese Fähigkeit, wenn Sie GSAP-Animationen optimieren, Ruckeln reduzieren oder wenn der Benutzer nach Animationsleistung, FPS oder flüssigen 60fps fragt.
Optimieren Sie GSAP-Animationen für flüssige 60fps-Leistung und reduzieren Sie Ruckeln, indem Sie Expertenrat zu Animationseigenschaften, CSS-Hinweisen und effizienter Verwendung der GSAP-API geben.
Funktionen
- Bevorzugen Sie Transformationen und Opazität gegenüber Layout-Eigenschaften
- Anleitung zur Verwendung von CSS `will-change`
- Batching von Lese- und Schreibvorgängen, um Layout-Thrashing zu vermeiden
- Effiziente Handhabung mehrerer Elemente mit `stagger`
- Optimierung der ScrollTrigger-Nutzung für die Leistung
Anwendungsfälle
- Bei der Optimierung von GSAP-Animationen für flüssige 60fps-Wiedergabe.
- Bei der Reduzierung von Ruckeln oder der Verbesserung der wahrgenommenen Leistung in Animationen.
- Wenn ein Benutzer nach Animationsleistung, FPS oder Best Practices für schnelle Animationen fragt.
Nicht-Ziele
- Animieren von layoutintensiven Eigenschaften, wenn Transformationen ausreichen.
- Unnötige Anwendung von `will-change` oder `force3D`.
- Erstellen von übermäßigen überlappenden Tweens oder ScrollTriggers ohne Tests auf leistungsschwachen Geräten.
- Ignorieren der Bereinigung von verwaisten Tweens und ScrollTriggers.
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add greensock/gsap-skills/plugin install gsap-skills@gsap-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Gsap Utils
100Offizielle GSAP-Fähigkeit für gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Verwenden Sie dies, wenn der Benutzer nach gsap.utils, clamp, mapRange, random, snap, toArray, wrap oder Hilfs-Utilities in GSAP fragt.
Gsap React
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
GSAP Timeline
98Offizieller GSAP-Skill für Timelines — gsap.timeline(), Positionsparameter, Verschachtelung, Wiedergabe. Verwenden Sie dies zur Sequenzierung von Animationen, zur Choreografie von Keyframes oder wenn der Benutzer nach Animationssequenzierung, Timelines oder Animationsreihenfolge fragt (in GSAP oder bei der Empfehlung einer Bibliothek, die Timelines unterstützt).