Files

T

calesthio a37b58199a skills: adopt GSAP Layer 3 + Layer 2 animation-runtime routing

Mirror the official GSAP AI skills (greensock/gsap-skills, MIT) into
.agents/skills/ and add the Layer 2 wiring that makes them discoverable
from a fresh context.

GSAP covers animation needs that Remotion primitives strain at:
per-character text reveals (SplitText), SVG shape morphs (MorphSVG),
curved camera paths (MotionPath), stroke-reveal line drawing (DrawSVG),
layout-to-layout flight (Flip), and custom bezier easings (CustomEase).
Also becomes mandatory day-1 knowledge if we wire in HyperFrames later
(HF uses GSAP timelines as its native animation runtime).

Layer 3 adds (.agents/skills/):
- gsap-core, gsap-timeline, gsap-plugins, gsap-utils
- gsap-react, gsap-performance
- gsap-scrolltrigger, gsap-frameworks (situational)
- gsap/README.md — OpenMontage-specific framing and Remotion-safe usage

Layer 2 wiring (the discovery triggers):
- skills/meta/animation-runtime-selector.md — NEW routing meta-skill.
  Decision matrix covering Remotion primitives, GSAP plugins, framer-
  motion, Lottie, Manim, D3, TerminalScene. Enforces the "keep it
  simple" bias: reach for GSAP only when the plugin genuinely earns
  its bundle weight.
- skills/pipelines/explainer/asset-director.md — references GSAP for
  kinetic typography, multi-step choreography, SVG line draws.
- skills/pipelines/animation/asset-director.md — references GSAP for
  logo morphs, motion paths, FLIP transitions, custom easings.
- skills/pipelines/cinematic/asset-director.md — references GSAP for
  cinematic camera moves, per-char title reveals, prestige easings.
- AGENT_GUIDE.md — adds a categorized Layer 3 skills table so a fresh-
  context agent can find the right skill by what they're trying to do,
  plus a pointer to animation-runtime-selector.md for routing.

Determinism: every GSAP use inside Remotion must drive timeline progress
from useCurrentFrame(), never requestAnimationFrame. Three Remotion-safe
patterns are documented in both the gsap/README and the selector skill.

Attribution: https://github.com/greensock/gsap-skills (MIT).

2026-04-16 20:07:00 -07:00

README.md

skills: adopt GSAP Layer 3 + Layer 2 animation-runtime routing

2026-04-16 20:07:00 -07:00

README.md

GSAP Skills in OpenMontage

Eight Layer 3 skills teaching the agent correct GSAP (GreenSock Animation Platform) usage. Sourced from greensock/gsap-skills, MIT licensed.

Why GSAP is in this repo

OpenMontage doesn't use GSAP directly today — Remotion compositions are driven by useCurrentFrame() + interpolate() + spring(). GSAP becomes relevant in two concrete scenarios:

Advanced text / SVG / motion-path animation inside a Remotion component. GSAP's plugin family (SplitText, MorphSVG, DrawSVG, MotionPath, CustomEase) solves problems that are painful to hand-roll with primitive interpolate() calls. When you need per-character reveals, curved camera paths over SVG, or morphing between two arbitrary shapes — reach for GSAP.
HyperFrames composition (future). If the parallel HyperFrames engine gets wired in (see DESIGN.md / earlier discussion), GSAP is its native animation runtime via the Frame Adapter pattern — timelines are paused and registered on window.__timelines, and the engine seeks them frame-by-frame. GSAP timeline authoring becomes a day-1 skill.

When to read which

You're doing…	Read first
Any GSAP animation, starting from zero	`gsap-core`
Multi-step sequence or choreography	`gsap-timeline`
Per-word or per-character text animation	`gsap-plugins` (SplitText section)
SVG shape morph	`gsap-plugins` (MorphSVG section)
Object following a curved path	`gsap-plugins` (MotionPath section)
Custom bezier easing	`gsap-plugins` (CustomEase section)
GSAP inside a React component (Remotion)	`gsap-react`
Math helpers (clamp, mapRange, interpolate, random)	`gsap-utils`
Debugging slow animations	`gsap-performance`
Scroll-driven animation (web preview only, not video render)	`gsap-scrolltrigger`
Vue / Svelte / non-React host	`gsap-frameworks`

How to discover these from Layer 2

These skills don't fire automatically. Trigger points:

skills/meta/animation-runtime-selector.md — the dispatcher meta skill. When authoring any animated scene, read this first; it routes you to the right Layer 3 skill based on what kind of motion you need.
Pipeline asset-director skills — animated-explainer, animation, and cinematic pipelines reference these skills where applicable (SplitText for text, MorphSVG for logos, MotionPath for camera moves).
Future hyperframes_compose tool — if added, will declare agent_skills: ["gsap-timeline", "gsap-core"] so the agent auto-reads them before authoring a HyperFrames composition.

Running GSAP deterministically inside Remotion

Standard GSAP drives animations via requestAnimationFrame — not deterministic, not Remotion-compatible. To use GSAP inside a Remotion component:

Pause the timeline on creation: const tl = gsap.timeline({ paused: true })
Drive progress from useCurrentFrame(): tl.progress(frame / durationInFrames)
Or seek by time: tl.seek(frame / fps) to a specific point
Or use GSAP as a value calculator only — call tween math via gsap.parseEase(...) and gsap.utils.interpolate(...) to compute values without running a real animation loop

This pattern is what HyperFrames uses internally. Inside Remotion, prefer native interpolate() for simple cases; use GSAP when you need SplitText / MorphSVG / MotionPath / CustomEase specifically.

Attribution

Source: https://github.com/greensock/gsap-skills License: MIT Copied: 2026-04-16 (at commit {{source_commit}} — see upstream for latest)