無料GitHub で公開

example-gsap

Patterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア未検証

インストール方法を見る

含まれるファイル（1）

SKILL.md1.9 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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
  const helios = new Helios({
    fps: 30,
    durationInSeconds: 5,
  });

  // 2. Setup GSAP Timeline (PAUSED is critical)
  const tl = gsap.timeline({ paused: true });

  // 3. Define animations
  tl.to(".box", {
    rotation: 360,
    x: 100,
    duration: 2,
    ease: "power1.inOut"
  })
  .to(".box", {
    scale: 2,
    duration: 2
  });

  // 4. Subscribe and Sync
  helios.subscribe((state) => {
    // Convert frame count to seconds
    const timeInSeconds = state.currentFrame / helios.fps;

    // Seek GSAP to exact time
    tl.seek(timeInSeconds);
  });

  // 5. Bind for Preview
  helios.bindToDocumentTimeline();
  window.helios = helios;
</script>

Critical Rules

Always Pause: The GSAP timeline must be initialized with { paused: true }. If it plays automatically, it will fight with Helios for control.
Use Seek: Do not use tl.progress() unless you calculate the normalized 0-1 value. tl.seek(seconds) is usually more direct since Helios knows FPS and Frame Count.
No requestAnimationFrame: Do not create your own rAF loop for GSAP. Let Helios drive the updates via subscribe.

Source Files

Example: examples/gsap-animation/

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

同じリポジトリのスキル

animated-video-philosophy

無料

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

日本語の概要は準備中です。原文の説明を表示しています。