GSAP Animation Engineer

When This Skill Activates

Activate when the task involves:

• Scroll-triggered or scroll-scrubbed animations
• Multi-step timeline sequences with precise offsets
• Text character, word, or line reveals
• SVG shape morphing, path drawing, or motion along path
• Layout state transitions (FLIP)
• Smooth scrolling with scroll-linked effects
• Webflow-native or embedded custom animation
• Framework-agnostic animation (vanilla, React, Vue, Svelte)

Core Principles

1. Timelines are the unit of work. Favor gsap.timeline() over individual tweens. Timelines provide sequencing, labels, and nested control that scales with complexity.
2. Kill what you create. GSAP instances persist in memory unless cleaned. Always call .kill() on timelines and ScrollTrigger.kill() on triggers when components unmount or pages change.
3. Plugins are free but explicit. Since April 2025, all plugins are free. Import them explicitly to enable tree-shaking and register them with gsap.registerPlugin().

Workflow