Skills
.Work. You
Rest

example-gsap

Community

Sync GSAP timelines with Helios for scrubbing.

Software Engineering#animation#gsap#timeline-sync#web-animation#helios#scrubbing
AuthorBintzGavin
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers synchronize GSAP animations with the Helios frame state, enabling frame-accurate scrubbing, pausing, and rendering in tandem with Helios.

Core Features & Use Cases

  • GSAP timeline integration: drive a GSAP timeline using the Helios frame state to scrub, pause, and render precisely.
  • Synchronized previews: keep GSAP animations in lockstep with Helios frames during live previews and demos.
  • Use Case: imagine a complex UI animation where GSAP controls a sequence that must exactly match a Helios timeline for training demos or interactive docs.

Quick Start

Create a PAUSED GSAP Timeline, subscribe to Helios updates, convert the Helios frame to seconds, and call timeline.seek(seconds) to synchronize. Then bind Helios to the document timeline for preview.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: example-gsap
Download link: https://github.com/BintzGavin/helios/archive/main.zip#example-gsap

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.