example-gsap
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
- Create a GSAP Timeline with
paused: true. - Subscribe to Helios updates.
- Inside the subscription, convert the Helios frame to seconds.
- Call
timeline.seek(seconds)to synchronize.
<script type="module">
import { Helios } from '@helios-project/core';
import { gsap } from 'gsap';
// 1. Initialize Helios
More from bintzgavin/helios-skills
helios-skills
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
73motion-design-rules
Motion design framework for programmatic video. Defines anti-slideshow architecture, visual layering, physics-based easing, choreography rules, and quality validation. Reference this skill from any guided video skill.
6helios-renderer
Renderer API for generating video/image output from Helios compositions. Use when you need to programmatically render a composition to a file using Node.js.
5guided-product-demo
End-to-end guided workflow for creating a product demo or showcase video. Extracts brand identity from the repo, generates a polished soundtrack, and produces a feature-focused motion.dev composition rendered via Helios CLI. Use when making product demos, feature showcases, or UI walkthroughs.
5guided-promo-video
End-to-end guided workflow for creating a promotional hype video. Extracts brand identity from the repo, generates beat-synced music, and produces a high-energy motion.dev composition rendered via Helios CLI. Use when making brand-aligned promo or hype videos.
5render-video
Workflow for rendering a Helios composition to a video file. Use when you need to automate video production or export a high-quality animation.
4