Summary
This bridges GSAP's professional animation toolkit with Remotion's frame-based rendering through a clever hook that seeks a paused timeline to match the current frame. You get SplitText for character-level reveals with mask wrapping, MorphSVG for shape tweening, DrawSVG for stroke animations, and advanced easing curves like CustomBounce. The skill includes a font-loading variant of the hook since SplitText needs accurate measurements, plus patterns for highlight boxes behind specific words and ScrambleText decode effects. All GSAP plugins are now free after Webflow's acquisition. Use this when Remotion's interpolate() and spring() aren't enough for complex timeline orchestration or when you need staggered animations with grid distribution. The determinism warning about ScrambleText is worth noting if you need pixel-perfect reproducibility.
Install to Claude Code
npx -y skills add notedit/happy-skills --skill gsap-animation --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
