animation_create_timeline
Build and manage animation timelines using Framer Motion or GSAP to streamline UI/UX development, ensuring precise control over target elements, properties, duration, delay, and easing.
Instructions
Create animation timeline with Framer Motion or GSAP
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| animations | Yes | ||
| library | No | framer-motion |
Implementation Reference
- src/tools/animation.ts:22-58 (handler)Main handler function for animation_create_timeline: validates input with Zod schema, generates timeline code for Framer Motion or GSAP, and returns structured JSON response.async createTimeline(args: any) { const params = AnimationTimelineSchema.parse(args); try { let timeline: any; if (params.library === 'framer-motion') { timeline = this.createFramerMotionTimeline(params.animations); } else { timeline = this.createGSAPTimeline(params.animations); } return { content: [ { type: 'text', text: JSON.stringify({ library: params.library, timeline, usage: this.getUsageExample(params.library), totalDuration: this.calculateTotalDuration(params.animations) }, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error creating animation timeline: ${error.message}` } ], isError: true }; } }
- src/tools/animation.ts:3-12 (schema)Zod validation schema for the animation_create_timeline tool inputs, used within the handler.const AnimationTimelineSchema = z.object({ library: z.enum(['framer-motion', 'gsap']).default('framer-motion'), animations: z.array(z.object({ target: z.string(), properties: z.record(z.any()), duration: z.number().optional(), delay: z.number().optional(), easing: z.string().optional() })) });
- src/index.ts:120-147 (registration)Tool registration in the ListTools response, defining name, description, and inputSchema matching the implementation.{ name: 'animation_create_timeline', description: 'Create animation timeline with Framer Motion or GSAP', inputSchema: { type: 'object', properties: { library: { type: 'string', enum: ['framer-motion', 'gsap'], default: 'framer-motion' }, animations: { type: 'array', items: { type: 'object', properties: { target: { type: 'string' }, properties: { type: 'object' }, duration: { type: 'number' }, delay: { type: 'number' }, easing: { type: 'string' } } } } }, required: ['animations'] } },
- src/index.ts:314-315 (handler)MCP server handler dispatch: switch case that calls the AnimationTools.createTimeline method.case 'animation_create_timeline': return await this.animationTools.createTimeline(args);
- src/tools/animation.ts:100-128 (helper)Helper method to generate Framer Motion variants and sequence for the animation timeline.private createFramerMotionTimeline(animations: any[]): any { const variants: any = {}; const sequence: any[] = []; animations.forEach((anim, index) => { const variantName = `step${index}`; variants[variantName] = { ...anim.properties, transition: { duration: anim.duration || 0.3, delay: anim.delay || 0, ease: this.convertToFramerEasing(anim.easing) } }; sequence.push({ target: anim.target, variant: variantName, at: anim.delay || index * 0.1 }); }); return { type: 'framer-motion', variants, sequence, code: this.generateFramerMotionCode(variants, sequence) }; }