🎯

gsap

🎯Skill

from heygen-com/hyperframes

What it does

Skill that teaches AI agents the GSAP animation API for Hyperframes compositions, including timelines, easing, ScrollTrigger, plugins, and performance best practices across React, Vue, and Svelte.

Overview

A skill that teaches AI agents the GSAP (GreenSock Animation Platform) API specifically for Hyperframes video compositions. It covers timeline creation, easing functions, ScrollTrigger integration, GSAP plugins, and performance best practices across React, Vue, and Svelte frameworks. Registered as the /gsap slash command in Claude Code.

Key Features

Complete GSAP timeline API reference tailored for Hyperframes video compositions
Easing functions, stagger animations, and keyframe sequences for smooth motion design
ScrollTrigger plugin integration for scroll-driven video animations
Performance best practices and anti-patterns to avoid in animation code
Framework-specific guidance for React, Vue, and Svelte GSAP usage

Who is this for?

Developers creating Hyperframes video compositions who need polished, timeline-driven animations
AI agent users who want their agent to write correct, performant GSAP code in video projects
Anyone building motion-heavy video content with the Hyperframes framework

📦

Same repository

heygen-com/hyperframes(24 items)

gsap

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add heygen-com/hyperframes --skill gsap

skills.sh Install⚠ Installs to .agents/skills/

npx skills add heygen-com/hyperframes --skill gsap

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/gsap/SKILL.md

SKILL.md

89,908Installs

AddedApr 13, 2026

View on GitHub Back to Skills

More from this repository10

🎯

hyperframes🎯Skill

Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.

🎯

hyperframes-cli🎯Skill

CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.

🎯

website-to-hyperframes🎯Skill

Skill that enables AI agents to convert existing websites, PDFs, CSVs, and other content into Hyperframes video compositions, supporting format-specific outputs like TikTok-style vertical videos.

🎯

hyperframes-registry🎯Skill

Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.

🎯

remotion-to-hyperframes🎯Skill

A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.

🎯

css-animations🎯Skill

A CSS Animations adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to use CSS animations and keyframes within HyperFrames video compositions.

🎯

tailwind🎯Skill

Part of HyperFrames, an open-source video rendering framework for creating HTML-based video compositions with AI agents; this skill provides Tailwind CSS v4 browser-runtime styling guidance for video compositions.

🎯

animejs🎯Skill

An Anime.js adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Teaches AI coding agents how to use Anime.js animations within HyperFrames video compositions.

🎯

three🎯Skill

A Three.js adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to create 3D scenes and animations within HyperFrames video compositions.

🎯

lottie🎯Skill

A Lottie adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to embed and control Lottie animations within HyperFrames video compositions.