gsap-timeline

Overview of gsap-timeline skill

What gsap-timeline is for

The gsap-timeline skill helps you build and reason about gsap.timeline() sequences: ordered animation steps, overlaps, labels, and nested playback. Use the gsap-timeline skill when the real problem is coordination, not a single tween—such as choreographing entrance states, syncing multiple UI elements, or mapping a motion design into a repeatable sequence.

Best-fit use cases

This is a good fit for developers and designers working on UI motion, product microinteractions, landing page reveals, onboarding flows, or any animation that needs predictable timing. It is especially useful for gsap-timeline for UI Design when you need to convert a visual story into a concrete timeline structure.

Why this skill is different

The main value is not “how to animate,” but how to place animation steps correctly. The gsap-timeline guide focuses on default sequencing, the position parameter, and playback behavior so you can avoid brittle timing assumptions. If you need scroll control, single-property easing, or React-specific wiring, a different GSAP skill is usually a better starting point.

How to Use gsap-timeline skill

Install and activate

Use the directory install flow for the gsap-timeline install step, then attach the skill to the task before drafting code or prompts. A typical install command is:
npx skills add greensock/gsap-skills --skill gsap-timeline
After that, read the skill content first so the model has the right sequencing rules before it drafts animation code.

Read the right source first

Start with SKILL.md in skills/gsap-timeline. In this repository, that is the only source file, so the fastest path is to read it fully rather than searching for supporting folders that do not exist here. Pay special attention to:

• when the skill should be used
• how timeline creation defaults work
• the position parameter forms
• the notes on timeline playback and nesting

Turn a rough request into a usable prompt

The skill performs best when your prompt includes the animation goal, the affected elements, the desired order, and any overlap rules. Compare these:

• Weak: “Make this animate nicely with GSAP.”
• Strong: “Use gsap-timeline to reveal the hero heading, then stagger the cards, then fade the CTA in 0.2s before the cards finish. Keep the sequence readable and label the main beats.”

For gsap-timeline usage, include timing intent such as “overlap,” “after,” “at the same time,” or a named label. That lets the model choose the right position syntax instead of guessing.

Workflow that avoids bad timelines

Draft the motion in beats first, then map each beat to a timeline step. If the animation has branches, repeated sections, or reusable intro/outro states, ask for labels and nested timelines early. If you are building UI motion, specify whether the animation must be reversible, interruptible, or tied to component lifecycle, since that changes how the timeline should be structured.

gsap-timeline skill FAQ

Is gsap-timeline only for advanced GSAP users?

No. It is beginner-friendly if you can describe a sequence clearly. The main learning curve is understanding that timelines append by default and that the position parameter controls placement. If you can explain the order of your UI changes, the skill is usually enough to produce a workable first draft.

When should I not use it?

Do not use gsap-timeline when you only need a single tween, basic easing, or scroll-triggered orchestration. In those cases, gsap-core, gsap-scrolltrigger, or gsap-react may be a better fit. The gsap-timeline skill is strongest when timing relationships are the actual challenge.

How is this better than a generic prompt?

A generic prompt often produces timelines that animate in the right order but with weak placement logic. The gsap-timeline guide gives the model the vocabulary it needs—default append behavior, relative offsets, labels, and start/end anchors—so the output is more predictable and easier to maintain.

Does it help with UI design workflows?

Yes, especially when a design handoff describes motion in prose rather than code. For gsap-timeline for UI Design, the skill helps translate “heading appears, cards cascade, button settles last” into a structured animation plan with explicit timing instead of loose sequencing.

How to Improve gsap-timeline skill

Provide timing intent, not just outcomes

The biggest quality jump comes from stating where overlap is allowed. For example, say “start the subtitle 0.15s after the heading begins” instead of “make it smooth.” If the sequence needs a label, mention it in the prompt so the model can anchor later steps consistently.

Give the motion context that changes structure

Mention whether the timeline is for page load, hover interaction, modal open/close, onboarding, or repeated looping. A one-time entrance can be simple; a reversible interaction may need cleaner state management and fewer implicit assumptions. This is where the gsap-timeline skill is most useful: it turns intent into a stable sequence, not just animation code.

Watch for common failure modes

The usual mistakes are overusing absolute times, forgetting that tweens append by default, and mixing unrelated animation concerns into one timeline. If the first output feels off, ask for the same sequence rewritten with labels, fewer hardcoded seconds, or explicit overlap points. That usually improves clarity more than asking for “better animation.”

Iterate with concrete edits

After the first draft, refine the prompt by naming the elements, adding a preferred rhythm, and specifying any constraints like reduced motion, responsiveness, or reusability. Good follow-up prompts include:

• “Keep the same gsap-timeline structure, but make the middle section overlap by 0.25s.”
• “Rewrite this with labels so I can maintain it later.”
• “Adapt this for a reusable component and keep the timeline easy to reverse.”