understand_and_create_animation
Generate production-ready GSAP animation code from natural language descriptions for web development projects. Supports multiple frameworks and complexity levels.
Instructions
The main AI engine - understands any animation request and generates perfect GSAP code with surgical precision
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| request | Yes | Natural language description of the animation you want (e.g., "fade in cards one by one when scrolling", "create a hero entrance with staggered text") | |
| context | No | Development context and requirements | react |
| complexity | No | Animation complexity level | intermediate |
Implementation Reference
- index.ts:1339-1363 (registration)Tool registration in ListToolsRequestSchema handler - defines the tool name, description, and input schema with properties for request, context, and complexity
name: 'understand_and_create_animation', description: 'The main AI engine - understands any animation request and generates perfect GSAP code with surgical precision', inputSchema: { type: 'object', properties: { request: { type: 'string', description: 'Natural language description of the animation you want (e.g., "fade in cards one by one when scrolling", "create a hero entrance with staggered text")' }, context: { type: 'string', description: 'Development context and requirements', enum: ['react', 'vanilla', 'nextjs', 'vue', 'performance-critical', 'mobile-optimized'], default: 'react' }, complexity: { type: 'string', description: 'Animation complexity level', enum: ['simple', 'intermediate', 'advanced', 'expert'], default: 'intermediate' } }, required: ['request'] } }, - index.ts:1341-1362 (schema)Input schema definition for the tool - defines the required 'request' parameter and optional 'context' and 'complexity' parameters with their types and enums
inputSchema: { type: 'object', properties: { request: { type: 'string', description: 'Natural language description of the animation you want (e.g., "fade in cards one by one when scrolling", "create a hero entrance with staggered text")' }, context: { type: 'string', description: 'Development context and requirements', enum: ['react', 'vanilla', 'nextjs', 'vue', 'performance-critical', 'mobile-optimized'], default: 'react' }, complexity: { type: 'string', description: 'Animation complexity level', enum: ['simple', 'intermediate', 'advanced', 'expert'], default: 'intermediate' } }, required: ['request'] } - index.ts:1487-1579 (handler)Main handler function that executes the tool - performs intent analysis, generates appropriate GSAP code based on detected patterns (scroll, text, interactive), and returns formatted response with AI-generated animation code
case 'understand_and_create_animation': { const userRequest = args?.request as string; const context = args?.context as string || 'react'; const complexity = args?.complexity as string || 'intermediate'; if (!userRequest) { throw new Error('Animation request is required'); } // Advanced intent analysis const analysis = INTENT_ANALYZER.analyze(userRequest); if (analysis.length === 0) { return { content: [{ type: 'text', text: `# Animation Request Analysis I need more specific details to create the perfect animation. Could you describe: **What elements should animate?** (buttons, cards, text, images, etc.) **When should it trigger?** (page load, scroll, hover, click, etc.) **What kind of movement?** (fade, slide, scale, rotate, etc.) ## Examples of clear requests: - *"Fade in portfolio cards one by one when scrolling into view"* - *"Create a hero title that reveals character by character on page load"* - *"Build a smooth hover effect for navigation buttons"* - *"Make an interactive drag system for image gallery"* ## I can create animations for: āØ **Scroll-based effects** - Parallax, reveals, pins, scrubbing š **Text animations** - Character reveals, typewriter, morphing šÆ **Interactive elements** - Hover, click, drag, touch gestures š¬ **Complex sequences** - Timelines, choreographed animations ā” **Performance critical** - 60fps, mobile-optimized, efficient Just describe what you want in natural language and I'll generate production-ready code!` }] }; } const primaryIntent = analysis[0]; let generatedCode = ''; // Generate appropriate code based on detected intent if (primaryIntent.pattern === 'scroll_based') { generatedCode = CODE_GENERATORS.generateScrollAnimation(userRequest, context); } else if (primaryIntent.pattern === 'text_animations') { generatedCode = CODE_GENERATORS.generateTextAnimation(userRequest, context); } else if (primaryIntent.pattern === 'interactive') { generatedCode = CODE_GENERATORS.generateInteractiveAnimation(userRequest, context); } else { // Default to entrance animation with detected techniques generatedCode = CODE_GENERATORS.generateScrollAnimation(userRequest, context); } let result = `# šÆ AI-Generated GSAP Animation\n\n`; result += `**Your Request**: "${userRequest}"\n\n`; result += `**š§ AI Analysis**:\n`; result += `- **Primary Intent**: ${primaryIntent.pattern} (${(primaryIntent.confidence * 100).toFixed(1)}% confidence)\n`; result += `- **Detected Keywords**: ${primaryIntent.matches.join(', ')}\n`; result += `- **Recommended Techniques**: ${primaryIntent.techniques.join(', ')}\n`; result += `- **Best Practices Applied**: ${primaryIntent.best_practices.join(', ')}\n\n`; result += `**āļø Configuration**:\n`; result += `- **Framework**: ${context}\n`; result += `- **Complexity**: ${complexity}\n`; result += `- **Performance**: 60fps optimized\n`; result += `- **Responsive**: Mobile-friendly\n\n`; result += generatedCode; result += `\n\n## š Production Features Included:\n`; result += `- ā **Performance**: GPU acceleration, memory cleanup\n`; result += `- ā **Responsive**: Adapts to all screen sizes\n`; result += `- ā **Accessibility**: Respects user motion preferences\n`; result += `- ā **Browser Support**: Modern browsers + IE11 with polyfills\n`; result += `- ā **Framework Ready**: ${context} integration included\n`; result += `- ā **Production Tested**: Battle-tested patterns and techniques\n\n`; result += `## šØ Customization Options:\n`; result += `- **Timing**: Adjust \`duration\` and \`stagger\` values\n`; result += `- **Easing**: Try \`"power3.out"\`, \`"elastic.out(1, 0.3)"\`, \`"back.out(1.7)"\`\n`; result += `- **Triggers**: Modify \`start\` and \`end\` positions for ScrollTrigger\n`; result += `- **Effects**: Combine multiple properties for unique animations\n\n`; result += `*Generated with surgical precision by GSAP Master AI* ā”`; return { content: [{ type: 'text', text: result }] }; } - index.ts:1496-1542 (handler)Core logic within handler that analyzes user intent using INTENT_ANALYZER.analyze() and routes to appropriate code generators (generateScrollAnimation, generateTextAnimation, or generateInteractiveAnimation) based on detected patterns
// Advanced intent analysis const analysis = INTENT_ANALYZER.analyze(userRequest); if (analysis.length === 0) { return { content: [{ type: 'text', text: `# Animation Request Analysis I need more specific details to create the perfect animation. Could you describe: **What elements should animate?** (buttons, cards, text, images, etc.) **When should it trigger?** (page load, scroll, hover, click, etc.) **What kind of movement?** (fade, slide, scale, rotate, etc.) ## Examples of clear requests: - *"Fade in portfolio cards one by one when scrolling into view"* - *"Create a hero title that reveals character by character on page load"* - *"Build a smooth hover effect for navigation buttons"* - *"Make an interactive drag system for image gallery"* ## I can create animations for: āØ **Scroll-based effects** - Parallax, reveals, pins, scrubbing š **Text animations** - Character reveals, typewriter, morphing šÆ **Interactive elements** - Hover, click, drag, touch gestures š¬ **Complex sequences** - Timelines, choreographed animations ā” **Performance critical** - 60fps, mobile-optimized, efficient Just describe what you want in natural language and I'll generate production-ready code!` }] }; } const primaryIntent = analysis[0]; let generatedCode = ''; // Generate appropriate code based on detected intent if (primaryIntent.pattern === 'scroll_based') { generatedCode = CODE_GENERATORS.generateScrollAnimation(userRequest, context); } else if (primaryIntent.pattern === 'text_animations') { generatedCode = CODE_GENERATORS.generateTextAnimation(userRequest, context); } else if (primaryIntent.pattern === 'interactive') { generatedCode = CODE_GENERATORS.generateInteractiveAnimation(userRequest, context); } else { // Default to entrance animation with detected techniques generatedCode = CODE_GENERATORS.generateScrollAnimation(userRequest, context); } - index.ts:1544-1578 (handler)Response formatting logic that constructs the final AI-generated output with analysis results, configuration details, generated code, and production features
let result = `# šÆ AI-Generated GSAP Animation\n\n`; result += `**Your Request**: "${userRequest}"\n\n`; result += `**š§ AI Analysis**:\n`; result += `- **Primary Intent**: ${primaryIntent.pattern} (${(primaryIntent.confidence * 100).toFixed(1)}% confidence)\n`; result += `- **Detected Keywords**: ${primaryIntent.matches.join(', ')}\n`; result += `- **Recommended Techniques**: ${primaryIntent.techniques.join(', ')}\n`; result += `- **Best Practices Applied**: ${primaryIntent.best_practices.join(', ')}\n\n`; result += `**āļø Configuration**:\n`; result += `- **Framework**: ${context}\n`; result += `- **Complexity**: ${complexity}\n`; result += `- **Performance**: 60fps optimized\n`; result += `- **Responsive**: Mobile-friendly\n\n`; result += generatedCode; result += `\n\n## š Production Features Included:\n`; result += `- ā **Performance**: GPU acceleration, memory cleanup\n`; result += `- ā **Responsive**: Adapts to all screen sizes\n`; result += `- ā **Accessibility**: Respects user motion preferences\n`; result += `- ā **Browser Support**: Modern browsers + IE11 with polyfills\n`; result += `- ā **Framework Ready**: ${context} integration included\n`; result += `- ā **Production Tested**: Battle-tested patterns and techniques\n\n`; result += `## šØ Customization Options:\n`; result += `- **Timing**: Adjust \`duration\` and \`stagger\` values\n`; result += `- **Easing**: Try \`"power3.out"\`, \`"elastic.out(1, 0.3)"\`, \`"back.out(1.7)"\`\n`; result += `- **Triggers**: Modify \`start\` and \`end\` positions for ScrollTrigger\n`; result += `- **Effects**: Combine multiple properties for unique animations\n\n`; result += `*Generated with surgical precision by GSAP Master AI* ā”`; return { content: [{ type: 'text', text: result }] };