MCP.so
登录

gsap

heygen-com / hyperframes

代码仓库

关于 gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

安装 gsap

npx skills add https://github.com/heygen-com/hyperframes --skill gsap

基本信息

分类

创意与媒体

代码仓库

heygen-com / hyperframes

Skill

gsap

功能与用途

  • Create paused timelines synchronously and register them on window.__timelines keyed by data-composition-id for HyperFrames to seek and control

  • Core methods: gsap.to() , gsap.from() , gsap.fromTo() , gsap.set() with support for stagger, easing, callbacks, and relative values

  • Use transform aliases ( x , y , scale , rotation ) and autoAlpha for optimal performance; avoid layout property animations

  • Timeline sequencing via position parameter ( "<" , "+=0.5" , labels) and nesting for complex multi-element choreography

  • Includes gsap.quickTo() for high-frequency updates, gsap.matchMedia() for responsive and accessibility-aware animations, and finite repeat counts only

创意与媒体分类下的其他 Skills

vercel-react-native-skills

vercel-labs / agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

remotion-to-hyperframes

heygen-com / hyperframes

Port an existing Remotion (React) composition's source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

website-to-video

heygen-com / hyperframes

Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand assets. Use for portfolio / blog / docs / landing-page showcases. Not a product launch or promo, even from a URL (/product-launch-video). Unclear → /hyperframes.

pr-to-video

heygen-com / hyperframes

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

music-to-video

heygen-com / hyperframes

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

animejs

heygen-com / hyperframes

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.