animation_create_timeline
Create animation timelines for UI/UX development using Framer Motion or GSAP libraries to sequence and coordinate multiple animations with precise timing and easing controls.
Instructions
Create animation timeline with Framer Motion or GSAP
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| library | No | framer-motion | |
| animations | Yes |
Implementation Reference
- src/tools/animation.ts:22-58 (handler)Main execution handler for animation_create_timeline tool. Validates input schema, generates timeline based on library (Framer Motion or GSAP), computes usage example and duration, 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 input validation schema used by the handler to parse and validate tool arguments.
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:314-315 (registration)Tool dispatch registration in the central switch statement for CallToolRequest handling.
case 'animation_create_timeline': return await this.animationTools.createTimeline(args); - src/index.ts:120-147 (registration)Tool metadata registration in ListToolsRequest handler, including name, description, and JSON schema matching the Zod schema.
{ 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/tools/animation.ts:100-128 (helper)Key helper implementing Framer Motion timeline generation from animation parameters, creating variants, sequence, and sample code.
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) }; }