skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

gsap

Write GSAP animations and timelines for HyperFrames compositions.

Updated Mar 12, 2026
Search Tags:#timeline#animation#gsap#easing#audio visualizer#typewriter#hyperframes
One-click install
npx skills add https://github.com/abhinaaaavvv/dotfiles --skill gsap-abhinaaaavvv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/abhinaaaavvv/dotfiles/tree/main/.agents/skills/gsap
Command: npx skills add https://github.com/abhinaaaavvv/dotfiles --skill gsap-abhinaaaavvv

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing correct GSAP animation code requires remembering dozens of API details—tween methods, easing names, timeline position parameters, and performance rules. This Skill provides a complete reference so animations in HyperFrames compositions are written correctly the first time. ## Core Features & Use Cases - Core Tween Reference: Covers gsap.to(), from(), fromTo(), set(), transform aliases, easing, stagger, and function-based values. - Timeline Sequencing: Documents gsap.timeline(), the position parameter, labels, nesting, and playback control for multi-step animations. - Drop-in Effects: Includes 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: Build a HyperFrames composition where a headline types itself out with a blinking cursor while canvas bars pulse to an MP3 soundtrack, all driven by a single deterministic GSAP timeline. ## Quick Start Use the gsap skill to create a HyperFrames composition with a staggered entrance animation and a typewriter headline on a timeline.

Frequently Asked Questions about gsap

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

FAQPage Schema
How do I sequence multiple GSAP animations in order?▼

Use gsap.timeline() and chain .to() calls, controlling placement with the position parameter. Values like "<" start with the previous tween, "+=0.5" adds a gap, and labels let you jump to named points.

How to create a typewriter text effect with GSAP?▼

Use the TextPlugin with gsap.to() targeting the text property, setting duration from text length divided by characters per second. Add a blinking cursor via a CSS keyframe animation toggled with timeline callbacks.

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 width, height, top, and left, and add will-change: transform only to elements that actually animate.

Can GSAP animations respond to media queries and reduced motion?▼

Yes, gsap.matchMedia() runs setup only when a media query matches and auto-reverts when it stops matching. You can branch on conditions like min-width or prefers-reduced-motion inside the callback.

Why should I avoid fetch() when loading audio data for a HyperFrames visualizer?▼

HyperFrames reads window.__timelines synchronously after page load, so timelines built inside async .then() callbacks are not ready at capture time. Load audio data inline or via synchronous XHR instead.

Related Skills

Explore More Design & Creative Skills→
nexu-ionexu-io
93.2k

video-template-frame-decision-tree

Generate animated flowchart videos with branching paths using HTML, CSS, and GSAP motion.

Official
Intermediate
ruiyangruiyiruiyangruiyi

hyperframes

Convert HTML motion-graphics compositions into MP4/WebM videos via FFmpeg.

Community
Advanced
vTRKAvTRKA

reduced-motion-accessibility

Enforce reduced-motion fallbacks and validate with browser/runtime evidence.

Community
Advanced
gyalamanch001agyalamanch001a

gsap-timeline

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

Community
Intermediate