gsap

Overview of gsap skill

What the gsap skill does

The gsap skill is a practical GSAP animation reference for HyperFrames compositions. It helps you choose the right tween type, set properties correctly, and build timelines that behave predictably in production. If you want a gsap guide that focuses on implementation rather than theory, this skill is aimed at getting animations working with less trial and error.

Best fit for this skill

Use the gsap skill if you are writing entrance animations, motion transitions, staggered sequences, timeline-driven scenes, or reusable animation effects. It is especially useful for Design Implementation work where you already have a visual spec and need to translate it into gsap.to(), from(), fromTo(), or gsap.timeline() without breaking timing or overwriting properties.

Why it is worth installing

The main value is decision support: which GSAP API to use, which vars matter, and which defaults can cause bugs. The skill also surfaces practical constraints like camelCase property names, immediateRender, transform aliases, and performance-friendly patterns such as will-change and quickTo. That makes the gsap skill more useful than a generic prompt when you need output that is actually shippable.

How to Use gsap skill

Install and inspect the right files

Install with:

npx skills add heygen-com/hyperframes --skill gsap

Start with skills/gsap/SKILL.md, then read references/effects.md for ready-made patterns and scripts/extract-audio-data.py if your animation depends on audio data. This repo is small, so those files give you most of the real usage context fast.

Give the skill a concrete animation brief

The gsap skill works best when your prompt includes the element, motion goal, timing, and constraints. Instead of “animate this card,” use something like: “Create a gsap entrance for a product card: fade in from 24px below, 0.6s duration, power3.out, stagger three cards by 0.12s, no layout shift, and avoid overwriting hover transforms.” That kind of input helps the skill choose the right gsap usage and avoids vague defaults.

Read the code paths that affect output quality

For implementation work, prioritize the sections on core tween methods, common vars, transforms/CSS mapping, function-based values, and timelines. Those are the parts that change real output quality. If you need a reusable motion pattern, check references/effects.md first; it shows how the repo expects effects to be structured and where plugin requirements matter.

Use workflow details that prevent bad animations

Prefer GSAP transform aliases over raw transform strings, and use gsap.set() for immediate state setup before timed motion. When chaining timelines, use labels and position parameters intentionally rather than stacking everything at the same timestamp. If a tween touches the same element/property more than once, pay attention to immediateRender and overwrite so the gsap skill does not create visible jumps.

gsap skill FAQ

Is this gsap skill only for HyperFrames?

It is written for HyperFrames compositions, but the gsap usage patterns are broadly transferable. If you are not working in HyperFrames, you can still learn from the API guidance, though you may need to adapt file structure and lifecycle handling yourself.

Do I need GSAP experience first?

No. The gsap skill is suitable for beginners who know the animation goal they want but are unsure which API to use. It is still most valuable if you can describe the element states, timing, and sequence, because those details drive better output than a generic “make it smooth” prompt.

When should I not use it?

Do not reach for this skill if you only need one-off CSS transitions or if your motion is simple enough to define directly in style sheets. It is also a poor fit when you need a custom runtime architecture unrelated to GSAP timelines, or when your brief does not define target elements and desired motion states.

How is it different from a generic prompt?

A generic prompt often produces a plausible animation idea. The gsap skill is more useful when you need correct GSAP syntax, safer defaults, and timeline behavior that matches implementation reality. It reduces guesswork around gsap install-style onboarding, tween selection, property naming, and performance-sensitive choices.

How to Improve gsap skill

Provide the visual spec, not just the goal

The fastest way to improve gsap output is to specify start state, end state, sequence, and constraints. For example: “Text should rise 20px and fade in over 0.5s, then the button scales from 0.96 to 1 with back.out(1.7), and both should respect reduced motion.” That gives the skill enough structure to produce a better gsap usage plan.

Name the elements and the conflict risks

Mention selectors, element counts, and any existing motion already on the page. If you know a property may already be animated elsewhere, say so. The most common failure mode is not the tween itself but an overwrite conflict or a transform collision, so calling that out improves results immediately.

Ask for implementation-ready output

If you want a design implementation result, ask for timeline order, exact vars, and plugin requirements in the first response. Good follow-up prompts include “convert this to a reusable timeline,” “replace raw transforms with GSAP aliases,” or “optimize for performance and avoid layout thrash.” Those prompts push the gsap skill toward production-friendly code instead of demo motion.

Iterate using one change at a time

After the first pass, refine one dimension only: timing, easing, staggering, or structure. If the motion feels too abrupt, ask to soften the ease; if it feels too slow, reduce duration; if elements compete, request overwrite: "auto" or clearer timeline labels. That keeps the gsap skill focused and makes the next version easier to judge.