gsap

Name: gsap
Availability: InStock
Author: Muze

Generate GSAP animation guidance for HyperFrames compositions with timelines and responsive motion.

1|2|Updated Jun 16, 2026

Search Tags:#performance #animation #gsap #easing #timelines #audio-visualizer #hyperframes

Ready to run

npx skills add https://github.com/MuzeWinter/CooperAPI-Plugin --skill gsap-muzewinter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/MuzeWinter/CooperAPI-Plugin/tree/main/plugins/hyperframes/skills/gsap
Command: npx skills add https://github.com/MuzeWinter/CooperAPI-Plugin --skill gsap-muzewinter

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill gives you reliable guidance for writing GSAP animations inside HyperFrames without guessing at syntax, sequencing, or performance tradeoffs.

Core Features & Use Cases

Core tween methods, easing, defaults, transforms, and responsive motion patterns for common GSAP animation work.
Timeline design with labels, position control, nesting, playback control, and cleaner sequencing than chained delays.
Performance and cleanup guidance for compositor-friendly motion, plus drop-in patterns for typewriter effects and audio visualizers.
Use it when building entrance animations, interactive motion systems, text reveals, or beat-synced visual experiences in HyperFrames.

Quick Start

Ask me to create a HyperFrames GSAP animation plan for your scene, and I will return a timeline-based implementation with best-practice motion settings.

Frequently Asked Questions about gsap

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

FAQPage Schema

How do I build GSAP timeline animations for HyperFrames scenes?▼

Build GSAP timeline animations by using deterministic timeline construction with labels and position control instead of chained delays. This ensures cleaner sequencing, compositor-friendly transforms, and precise playback control for HyperFrames motion designs.

What is the best way to sync GSAP audio visualizers with animation data?▼

Sync GSAP audio visualizers by preparing synchronous audio-data before animation. This requires processing dependencies like ffmpeg and numpy to extract audio data, enabling deterministic timeline construction for beat-synced visual experiences in HyperFrames.

Do I need numpy and ffmpeg to create audio-driven GSAP motion?▼

You need numpy and ffmpeg to prepare synchronous audio-data for audio-driven GSAP motion. These dependencies handle audio processing, allowing the animation timeline to accurately sync with the audio visualizer in HyperFrames.

How do I write text reveal and typewriter effects using GSAP?▼

Write text reveal and typewriter effects using drop-in GSAP patterns. These reusable effect patterns rely on core tween methods, easing, and camelCase properties to create polished entrance animations within HyperFrames compositions.

Why use GSAP timeline labels instead of chained delays for motion sequencing?▼

Use GSAP timeline labels instead of chained delays because they provide precise position control and nesting capabilities. This method guarantees deterministic timeline construction, resulting in cleaner sequencing and easier playback control for complex animations.

What are the performance guidelines for GSAP transforms in HyperFrames?▼

Performance guidelines for GSAP transforms require using compositor-friendly transforms and camelCase properties. Following these cleanup and performance patterns ensures responsive motion that integrates smoothly without dropping frames in HyperFrames.