GSAP is a tool for making animations on the web. In HyperFrames, you use it to create moving elements for video compositions. You write code to control how things move, fade, and scale.
This reference shows you how to use gsap.to(), gsap.from(), and timelines. You will learn about easing, staggering, and performance. Use these tips to build smooth animations that work with HyperFrames.
Remember to create a paused timeline and register it on window.__timelines. Do not use infinite loops or async code. Keep everything finite and synchronous for the best results.
Add Gsap skill to your workflow
Global
mkdir -p ~/.claude/skills/gsapProject
mkdir -p .claude/skills/gsapSource Repository
More Generative Media Claude Code Skills
Remotion Best Practicesremotion-dev/skills
Best practices for building videos with React and Remotion
Remotion Renderhalt-catch-fire/skills
Render React code to MP4 videos with Remotion and the belt CLI
Ai Video Generationhalt-catch-fire/skills
Create AI videos from text or images with 40+ models via inference.sh CLI
Ai Image Generationhalt-catch-fire/skills
Create AI images from text with 50+ models via simple CLI commands
Image To Videoagentspace-so/runcomfy-agent-skills
Pick the right AI model to animate your image into video
Nano Banana 2agentspace-so/runcomfy-agent-skills
Create rapid image drafts with strong typography using Google Nano Banana 2 on RunComfy
Nano Banana Editagentspace-so/runcomfy-agent-skills
Edit images with AI preserve subjects swap backgrounds batch up to 20
Flux Kontextagentspace-so/runcomfy-agent-skills
Flux Kontext Pro edits one image part while keeping the rest identical