wikis / HyperFrames / wiki / concepts / gsap-animation.md view as markdown

GSAP Animation

Definition

GSAP is the primary animation runtime used in many HyperFrames compositions because timelines can be made seekable and controlled by render time.

How It Works

Create paused GSAP timelines and expose/register them so HyperFrames can seek them during render. Animation should be tied to the composition timeline rather than running freely on wall-clock time.

Key Parameters

• Paused timeline construction.
• Explicit durations and labels.
• Registration on the expected global timeline registry for the project/version.
• Avoiding random stagger or runtime-generated state unless seeded and stable.

When To Use

Use GSAP for scene transitions, typography, card cascades, chart reveals, UI motion, and any motion that benefits from precise timeline control.

Risks & Pitfalls

Do not let GSAP auto-play independently. Avoid timelines created after validation/render starts. Make sure timeline state is fully seekable and deterministic.

Related Concepts

• deterministic rendering
• frame adapters
• authoring model

Sources

• raw/docs/guides__gsap-animation.md
• raw/docs/concepts__frame-adapters.md