Generate GSAP Animation Code

Generates production-ready GSAP (GreenSock Animation Platform) code snippets for complex web animations, leveraging current best practices and multimodal input analysis.

תחום: עיצוב

מתי להשתמש

Use this skill when you need to create sophisticated, high-performance web animations for UI/UX elements, interactive experiences, or page transitions, and require precise code generation for GSAP.

תגיות: web-animation, gsap, front-end-development, ui-ux, code-generation

SKILL.md

--- name: Generate GSAP Animation Code description: Generates production-ready GSAP (GreenSock Animation Platform) code snippets for complex web animations, leveraging current best practices and multimodal input analysis. --- ## Overview This skill provides an advanced capability to generate highly optimized and customizable GSAP (GreenSock Animation Platform) code for a wide range of web animation scenarios. It incorporates best practices for performance, responsiveness, and user experience, and can consider multimodal inputs (e.g., descriptions of visual intent, desired motion paths, or even rough sketches) to produce precise animation code. ## When to use Invoke this skill when you are developing web interfaces that require dynamic and engaging animations. This includes animating UI components, creating interactive data visualizations, implementing smooth page transitions, or building complex parallax effects. It is particularly useful when you need to quickly prototype animation ideas or when current AI models like NVIDIA's Nemotron 3 Nano Omni Model can interpret design concepts to generate motion sequences. ## How it works 1. **Input Analysis**: The user provides a detailed description of the desired animation, including elements to animate, motion properties (position, scale, rotation, opacity, color), timing, easing, and any specific triggers or interactions. Multimodal inputs (e.g., text descriptions, visual mockups, or motion studies) can inform the animation generation. 2. **Configuration Extraction**: The skill identifies key parameters from the input, such as target elements (CSS selectors or IDs), animation properties, duration, delay, stagger, repeat, yoyo, and easing functions. 3. **GSAP Code Generation**: Using the extracted configuration, the skill constructs a GSAP Tween, Timeline, or ScrollTrigger animation, adhering to modern GSAP syntax and best practices. 4. **Optimization and Refinement**: The generated code is optimized for performance, ensuring smooth animations across different devices and browsers. Considerations for accessibility and responsiveness are also integrated. 5. **Output**: The skill returns a complete, ready-to-implement JavaScript code snippet containing the GSAP animation. ## Example usage **User Input:** "Create a sequential animation for three `div` elements with the class `card`. Each card should fade in and slide up from 50px below its final position, with a 0.2-second delay between each card. The animation should take 0.8 seconds per card, using an `easeOutBack` ease. The animation should trigger when the cards enter the viewport." **Claude Code Skill Output (example):** ```javascript gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".card", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 0.8, ease: "easeOutBack", stagger: 0.2, scrollTrigger: { trigger: ".card", start: "top 80%", // Adjust as needed toggleActions: "play none none none" } } ); ``` ## References * [GSAP Documentation](https://greensock.com/docs/) * [Awwwards - Best GSAP Animation Websites](https://www.awwwards.com/websites/gsap/) * [NVIDIA Releases Nemotron 3 Nano Omni Model](https://thesequence.substack.com/p/the-sequence-radar-853-last-week) (for potential multimodal input interpretation)