skills.rest
heygen-com
heygen-comOFFICIAL
Explore all skills by this author →
GitHub

gsap

Create deterministic GSAP timelines and tweens for HyperFrames compositions.

40.2k|3.8k|Updated Mar 10, 2026
Search Tags:#timeline#animation#gsap#web-animation#tween#hyperframes
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill gsap-heygen-com
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/heygen-com/hyperframes/tree/main/skills/gsap
Command: npx skills add https://github.com/heygen-com/hyperframes --skill gsap-heygen-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

GSAP is a reference and contract for integrating GSAP with HyperFrames to build deterministic, reusable motion in HTML-based compositions by standardizing how timelines and tweens are authored and registered for playback.

Core Features & Use Cases

  • Core tween methods like gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set() with sensible defaults.
  • Timeline construction via gsap.timeline() with labels, nesting, position parameter, and playback controls for complex sequences.
  • Performance guidance including use of transforms and will-change for GPU-accelerated animations, and compatibility with gsap.matchMedia.
  • Practical use cases include authoring consistent motion across HyperFrames projects and reusing patterns with a clear integration pattern via window.__timelines.
  • Reference-only guidance loaded on demand from references/effects.md for ready-made patterns.

Quick Start

Create a paused GSAP timeline and register it on window.__timelines with the composition's data-composition-id, then HyperFrames can seek and render it.

Frequently Asked Questions about gsap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create deterministic GSAP animations for HTML compositions?▼

To create deterministic GSAP animations, you must build a paused timeline and register it on the window.__timelines object using the exact data-composition-id, allowing the host environment to seek and render the sequence predictably.

What GSAP methods are supported for building web animation timelines?▼

Supported GSAP methods include core tween functions like gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set(), along with gsap.timeline() for constructing complex sequences with labels, nesting, and position parameters.

How do I sequence complex tweens using GSAP timelines?▼

You sequence complex tweens by constructing a gsap.timeline() instance, utilizing labels, nesting, and the position parameter to control playback, ensuring the timeline remains paused until registered for external playback control.

Does GSAP work with matchMedia for responsive web animations?▼

Yes, GSAP is compatible with gsap.matchMedia for responsive web animations, and performance guidance recommends using transforms and will-change properties to ensure GPU-accelerated motion across HTML compositions.

Why does my GSAP timeline not render in HyperFrames?▼

Your GSAP timeline will not render if it is not created in a paused state and registered on window.__timelines using the precise data-composition-id, which is required for HyperFrames to seek and render the animation.

Related Skills

Explore More Software Engineering Skills→
whyiloveher2411whyiloveher2411

hyperframes-core

Create HTML compositions with video, animation, and interactive elements using data attributes and timelines.

Community
Advanced
heygen-comheygen-com
40.2k

animejs

Convert Anime.js animations into seek-driven sequences registered on window.__hfAnime.

Official
Intermediate
MuzeWinterMuzeWinter
1

gsap

Generate GSAP animation guidance for HyperFrames compositions with timelines and responsive motion.

Community
Intermediate
LuXDAmoreLuXDAmore

gsap-timeline

Sequence and choreograph GSAP animations with timeline control.

Community
Intermediate