Gsap Animation

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-code