GSAP Integration Patterns

To use GSAP with Helios, you must drive the GSAP Timeline instance using the Helios frame state. This allows GSAP animations to be scrubbed, paused, and rendered frame-by-frame.

Quick Start

The "Paused Timeline" Pattern

1. Create a GSAP Timeline with paused: true.
2. Subscribe to Helios updates.
3. Inside the subscription, convert the Helios frame to seconds.
4. Call timeline.seek(seconds) to synchronize.

<script type="module">
  import { Helios } from '@helios-project/core';
  import { gsap } from 'gsap';