skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

gsap

Integrate GSAP with HyperFrames to build deterministic, playback-friendly animations.

7|9|Updated May 9, 2026
Search Tags:#timeline#animation#gsap#easing#tween#hyperframes
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill gsap-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.agents/skills/gsap
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill gsap-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive reference and practical patterns for building deterministic GSAP animations within HyperFrames, reducing trial-and-error and ensuring repeatable playback.

Core Features & Use Cases

  • Core Tween Methods: gsap.to(), gsap.from(), gsap.fromTo(), gsap.set() with clear, reusable patterns.
  • Timelines & Sequencing: Creating and nesting timelines with precise positioning, labels, and playback controls.
  • Performance & Best Practices: Emphasizes transform-based animations, will-change hints, and responsive patterns with gsap.matchMedia().
  • Use Cases: Animate UI elements, choreograph complex transitions, and drive data-driven motion in HyperFrames compositions.

Quick Start

Create a simple timeline by registering GSAP and animate an element with gsap.to('.box', { x: 100 });

Frequently Asked Questions about gsap

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

FAQPage Schema
How do I build deterministic GSAP animations in HyperFrames?▼

Create deterministic GSAP animations in HyperFrames by applying core tween methods and precise timeline sequencing with labels. This ensures repeatable playback and consistent timing across web components without trial-and-error.

What is the best way to sequence complex transitions with GSAP timelines?▼

Sequence complex transitions with GSAP timelines by creating and nesting timelines with precise positioning, labels, and playback controls. This approach choreographs micro-interactions cleanly and maintains deterministic execution.

How does gsap.matchMedia work for responsive animations?▼

The gsap.matchMedia method enables responsive animation patterns that adapt to different viewport conditions. It ensures motion behavior remains consistent and performant across various screen sizes within HyperFrames.

Can I use gsap.fromTo and gsap.set for micro-interactions in HyperFrames?▼

Yes, you can use gsap.fromTo and gsap.set to create micro-interactions in HyperFrames. These core tween methods provide clear, reusable patterns for defining start and end states with safe defaults and extensibility.

Why should I use transform-based animations and will-change hints with GSAP?▼

Use transform-based animations and will-change hints with GSAP to maximize rendering performance. This practice minimizes layout thrashing and ensures smooth, playback-friendly motion during UI transitions in HyperFrames.

Related Skills

Explore More Software Engineering Skills→
519lab519lab
2

hyperframes

Convert HTML compositions into animated videos with GSAP, audio, and captions.

Official
Advanced
Lev-itLev-it

remotion-to-hyperframes

Convert Remotion (React) video compositions to HyperFrames HTML for web embedding.

Official
Advanced
dz07dz07

Animations

Annotates and visualizes GitLab CI/CD runs and provides actionable insights for failures and bottlenecks, accessible via REST API and Python wheelhouse.

Community
Intermediate
aesthezelaesthezel
8

gsap-core

Create GSAP tweens, timelines, and scroll-driven animations in JavaScript.

Community
Advanced