skills.rest
AIDotNet
AIDotNetOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes-gsap

Write GSAP animations and timelines for HyperFrames compositions.

634|124|Updated Feb 10, 2026
Search Tags:#GSAP#easing#Animation#audio visualizer#typewriter#Hyperframes#Timeline
One-click install
npx skills add https://github.com/AIDotNet/OpenCowork --skill hyperframes-gsap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-gsap
Source: https://github.com/AIDotNet/OpenCowork/tree/main/resources/extensions/hyperframes/skills/hyperframes-gsap
Command: npx skills add https://github.com/AIDotNet/OpenCowork --skill hyperframes-gsap

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires numpy, ffmpeg, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Writing GSAP animations inside HyperFrames compositions requires knowing the correct tween methods, timeline sequencing, easing options, and performance constraints, and mistakes like animating layout properties or misusing the position parameter produce broken or janky results.

Core Features & Use Cases

  • GSAP API Reference: Covers gsap.to(), from(), fromTo(), set(), easing, stagger, defaults, and transform aliases with correct camelCase property names.
  • Timeline Sequencing: Explains gsap.timeline(), the position parameter, labels, nesting, and playback control for deterministic animation sequencing.
  • Drop-in Effects: Provides ready-made typewriter text and audio visualizer patterns, plus a Python script that extracts per-frame RMS and frequency band data from audio or video files.
  • Use Case: You are building a HyperFrames composition with a word-rotating typewriter headline synced to background music; use this Skill to sequence the timeline correctly and generate the audio-data.json driving the visualizer.

Quick Start

Use the hyperframes-gsap skill to create a GSAP timeline that types out a headline with a blinking cursor and then fades in a subtitle.

Frequently Asked Questions about hyperframes-gsap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sequence GSAP animations in a timeline?▼

Create a timeline with gsap.timeline() and chain .to() calls, using the position parameter to control placement. Use absolute times, relative offsets like "+=0.5", labels, or alignment shortcuts like "<" to start with the previous tween.

How to make a typewriter text effect with GSAP?▼

Use the TextPlugin and tween the text property with ease "none", setting duration from text length divided by characters per second. Add a blinking cursor span and toggle its CSS classes between blink and solid states at typing boundaries.

Which CSS properties should I animate with GSAP for best performance?▼

Animate transform aliases (x, y, scale, rotation) and opacity or autoAlpha, which stay on the compositor. Avoid animating width, height, top, and left when transforms achieve the same visual result.

Can I build an audio visualizer that syncs with a GSAP timeline?▼

Yes. Run the extract-audio-data.py script with ffmpeg and numpy to produce per-frame RMS and frequency band JSON, then drive canvas rendering from timeline callbacks at each frame time. Load the data synchronously, never with async fetch.

Why does my GSAP from() tween overwrite another animation?▼

from() and fromTo() tweens render immediately by default, so a later tween targeting the same property and element gets overwritten. Set immediateRender: false on the later tween or use overwrite: "auto" to resolve conflicts.

Related Skills

Explore More Design & Creative Skills→
chmonitorchmonitor
255

hyperframes-core

Enforce structural and runtime rules for HyperFrames HTML video compositions.

Official
Advanced
big4council-progbig4council-prog

hyperframes

Render GSAP-driven HTML compositions into MP4/WebM videos with FFmpeg.

Community
Advanced
SharmaAnurag99SharmaAnurag99

gsap-core

Animate DOM and SVG elements with GSAP core tweens and utilities.

Community
Intermediate
gyalamanch001agyalamanch001a

gsap-timeline

Sequence GSAP animation tweens into coordinated timelines with position parameters and labels.

Community
Intermediate