A comprehensive developer reference for building high-performance, frame-accurate GSAP animations integrated with the HyperFrames video rendering engine.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install gsap
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install gsap using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is GSAP Animation for HyperFrames?
The GSAP reference for HyperFrames is a specialized component of the Openclaw Skills library. It enables developer agents to programmatically generate precise, frame-accurate GSAP animations that interface flawlessly with the HyperFrames rendering contract. By utilizing a synchronous paused-timeline registration model, this skill ensures that web animations can be exported to video formats deterministically without skipping frames or layout shifts.
Integrating this technical knowledge into your workflow expands your Openclaw Skills workspace, permitting seamless control over complex web motions. The specification ensures that layout transitions, responsive matches, and hardware-accelerated transforms are executed in exact compliance with the hyper-frame adapters.
GSAP Animation for HyperFrames Use Cases
- Building frame-accurate video assets and animated layouts within HyperFrames web-to-video pipelines.
- Sequencing complex multi-element web animations with tight, label-based timing controls instead of arbitrary delays.
- Developing interactive UI templates that render flawlessly during static or dynamic timeline scrubs.
- Implementing performant, hardware-accelerated kinetic effects like typewriters and real-time audio visualizers.
How GSAP Animation for HyperFrames Works
- Synchronous Initialization: The developer synchronously initializes a paused GSAP timeline (
gsap.timeline({ paused: true })) during the document load lifecycle. - Registry Mapping: The initialized timeline is registered directly onto
window.__timelinesusing an active key matching the parent DOM node'sdata-composition-id. - Tween Sequencing: Specific visual components are sequenced using GSAP transform aliases (like
x,y,scale, androtation) to maintain rendering efficiency. - Adapter Orchestration: The HyperFrames engine programmatically queries the registered timeline to scrub, seek, and export precise frames during rendering cycles without calling standard playback commands.
GSAP Animation for HyperFrames Setup
To enable this capability in your local workspace using Openclaw Skills patterns, include the GSAP script in your HTML composition shell:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
Then, map your timeline to the HyperFrames registry synchronously:
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// Sequence your tweens
tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
// Register timeline with exact composition ID
window.__timelines["main"] = tl;
GSAP Animation for HyperFrames Data Schema & Taxonomy
GSAP Property and Alias Mapping
| GSAP Property | CSS Equivalent | Best Use Cases |
|---|---|---|
x / y / z |
translateX/Y/Z |
Moving objects without triggering browser reflow. |
xPercent / yPercent |
Percent Translate | Perfect for aligning dynamic assets relatively. |
scale / scaleX |
scale |
Scaling elements with hardware acceleration. |
autoAlpha |
opacity + visibility |
Smooth fading with performance cleanup. |
Runtime Environment Variables
- Timeline Registry: Synchronously mounted on
window.__timelines. - Registry Key: Must match the
data-composition-idof the target DOM wrapper. - Repeat Configuration: Must be finite counts (never
-1or infinite) calculated from the composition duration.
GSAP Animation for HyperFrames Advanced Features
- MatchMedia Responsive Adjustments: Revert and recalculate animations dynamically based on screen queries or media preferences.
- Nesting Master Timelines: Group multiple child timelines into a primary master timeline to manage complex cinematic sequences.
- Custom Dynamic Easing: Utilize parameterized built-in eases like
back.out(1.7)andelastic.out(1, 0.3)for fluid feedback. - QuickTo Animations: Handle fast, continuous value updates via
gsap.quickTo()to optimize mouse-tracking or scroll-linked events.
SKILL.md
Loading
Related Openclaw Skills
Dreamina CLI
A local CLI integration that enables AI agents to command Dreamina (即梦) for high-performance image and video generation workflows.
Markdown to PPTX Slides Converter (md-to-slides)
An automated utility to parse structured Markdown documents and compile them into fully editable PPTX presentations.
CSS Animations for HyperFrames
A specialized animation adapter that enables HyperFrames to search, pause, and seek native CSS keyframe animations deterministically.
China Insurance Advisor
An AI-driven thin proxy skill that connects users with a remote Chinese insurance advisor for automated planning, product comparison, and personalized financial advice.
Contribute Catalog
A structured workflow skill to author, validate, and submit new HyperFrames registry blocks or components to the public upstream repository.
Anime.js Adapter for HyperFrames
An adapter pattern skill that enables deterministic, seek-driven Anime.js animations and timelines inside HyperFrames compositions.
Featured*
