Tool

Description

Example Input

gsap_tween

Generate gsap.to/from/fromTo tweens

{ "target": ".box", "method": "to", "properties": { "opacity": 1, "x": 100 } }

gsap_timeline

Build multi-step GSAP timelines

{ "steps": [{ "target": ".a", "method": "to", "properties": { "x": 100 } }] }

gsap_easing

Look up and preview GSAP easing functions

{ "action": "lookup", "ease": "power2.out" }

gsap_preset

Generate common animation presets (fadeIn, slideUp, etc.)

{ "preset": "fadeIn", "target": ".hero" }

Tool

Description

Example Input

gsap_scrolltrigger

ScrollTrigger-powered scroll animations

{ "target": ".section", "mode": "standalone", "trigger": ".section" }

gsap_splittext

SplitText character/word/line animations

{ "target": ".heading", "splitType": "chars", "animation": "from" }

gsap_morphsvg

SVG shape morphing with MorphSVGPlugin

{ "target": "#shape1", "shape": "#shape2" }

gsap_drawsvg

SVG stroke drawing animations

{ "target": ".path", "from": "0%", "to": "100%" }

gsap_motionpath

Animate elements along motion paths

{ "target": ".dot", "path": "#circuit" }

gsap_flip

FLIP animation state transitions

{ "targets": ".cards", "action": "full" }

gsap_textplugin

Text replacement and scramble effects

{ "target": ".text", "text": "Hello!", "type": "replace" }

Tool

Description

Example Input

gsap_analyze

Static analysis for performance, best practices, accessibility

{ "code": "gsap.to('.box', { width: 100 })" }

gsap_controls

Play/pause/reverse/seek control code

{ "action": "play", "target": "timeline" }

gsap_utilities

GSAP utility methods (clamp, mapRange, snap, etc.)

{ "method": "clamp", "params": { "min": 0, "max": 100, "value": 150 } }

gsap_matchmedia

Responsive animations with gsap.matchMedia()

{ "breakpoints": [{ "name": "Mobile", "query": "(max-width: 768px)", "animations": [] }] }

gsap_debug

Debug utilities: markers, GSDevTools, logging, slow-motion

{ "action": "slowmo", "options": { "timeScale": 0.25 } }

gsap_performance

FPS monitoring, code optimization, frame profiling

{ "action": "monitor", "options": { "metrics": ["fps"] } }

gsap_framework_integration

Framework-specific code for React/Vue/Angular/Svelte

{ "framework": "react", "type": "hook" }