KKChen666
Community@KKChen666
KKChen666 provides GSAP animation engineering skills covering timelines, ScrollTrigger, React/Vue integration, performance tuning, HeroUI v2 components, and bitmap-to-SVG logo motion graphics.
Agent Skills by KKChen666
Showing 10 vetted skills indexed across 1 GitHub repositories.
KKChen666gsap-plugins
Implements GSAP plugin registration and usage for scroll, drag, SVG, text, and physics animations.
KKChen666gsap-timeline
Sequences GSAP tweens into timelines using position parameters, labels, and nesting.
KKChen666gsap-scrolltrigger
Implements scroll-linked animations, pinning, and scrubbing with GSAP ScrollTrigger.
KKChen666gsap-performance
Optimizes GSAP animations for smooth 60fps rendering using transforms and batching.
KKChen666gsap-core
Implements GSAP core tweens, eases, staggers, and responsive matchMedia animations in JavaScript.
KKChen666gsap-utils
Applies GSAP utility functions for clamping, mapping, snapping, and randomizing animation values.
KKChen666heroui-v2
Implements React UIs with HeroUI v2 components, theming, and provider configuration.
KKChen666gsap-frameworks
Implements GSAP animations in Vue, Nuxt, and Svelte with lifecycle-safe cleanup.
KKChen666pixel2motion
Converts static bitmap logos into animatable SVGs and generates logo animations exported as HTML, GIF, or video.
KKChen666gsap-react
Implements GSAP animations in React using the useGSAP hook with scoped selectors and automatic cleanup.
Frequently Asked Questions About KKChen666
FAQPage SchemaWhat tasks can I accomplish using KKChen666's skills?▼
You can build GSAP animations including timelines, ScrollTrigger scroll effects, draggable and physics plugins, and easing via CustomEase. Additional skills cover performance optimization for 60fps, React/Vue/Svelte integration, HeroUI v2 component building, and converting bitmap logos into animated SVGs.
Who are these skills designed for?▼
Front-end developers and motion designers working with JavaScript animation in React, Next.js, Vue, Nuxt, Svelte, or vanilla JS. They also serve UI engineers building with HeroUI v2 (Tailwind CSS plus Framer Motion) and designers needing logo motion graphics from static images.
How do I use the GSAP skills in a React project?▼
Use the gsap-react skill, which covers the useGSAP hook, refs, gsap.context(), and cleanup on unmount. For Vue, Nuxt, Svelte, or SvelteKit, the gsap-frameworks skill handles lifecycle hooks like onMounted and onDestroy with scoped selectors and proper teardown.
Are these skills free and open source?▼
Yes. All GSAP skills (core, timeline, ScrollTrigger, plugins, utils, performance, React, frameworks) and the pixel2motion logo animation skill are released under the MIT license. The HeroUI v2 skill is authored by heroui, version 2.8.0.
What prerequisites or dependencies do these skills require?▼
GSAP skills require the GSAP library running in any JavaScript framework or vanilla JS. The HeroUI v2 skill requires @heroui/react with HeroUIProvider configuration, Tailwind CSS, and Framer Motion. The pixel2motion skill outputs dependency-free interactive HTML, needing no runtime libraries.