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.
Keeps your Mac awake while Claude Code, Codex or Cursor works. Lets it sleep when they are done.
Try free for 7 days →
Block distracting apps from your iPhone permanently without a 3rd party app. Free and open source.
Block now (100% free) →
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Free an open-source skills that make AI coding agents easier to understand, verify, and control.
Download for free →
Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →Files
SKILL.md
Select a file.
Featured
Keeps your Mac awake while Claude Code, Codex or Cursor works. Lets it sleep when they are done.
Try free for 7 days →Block distracting apps from your iPhone permanently without a 3rd party app. Free and open source.
Block now (100% free) →Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Free an open-source skills that make AI coding agents easier to understand, verify, and control.
Download for free →Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →
