Skip to content
Get packs

GSAP Timeline Sequencing

Teaches an agent to write GSAP timelines that sequence, nest, and control animations

Source Download skill
Repository
greensock/gsap-skills
Stars
17,719
Licence
MIT
Files
1 file

What it does

Once installed, the agent knows the GSAP animation library's timeline system well enough to choreograph multi-step web animations. It can chain animations in order, place them at exact times or relative to labels and other animations, share default settings across steps, nest timelines inside each other, and control playback such as play, pause, reverse, seek, and kill. It also follows GSAP's official best practices, such as using the position parameter instead of chained delays.

Great for

  • Front-end developers building multi-step animations on websites or web apps with GSAP
  • Designers or creators who describe an animation sequence and want working GSAP code
  • Developers who want an agent to write maintainable, labelled animation code

Skip it if

  • Projects that do not use GSAP or do not need animation, since the guidance only applies to the GSAP library
  • Scroll-driven animations that need ScrollTrigger details; the file points to separate related skills for those and only covers the basic rule of keeping ScrollTrigger on top-level timelines

Try asking

  • “Make three cards slide in one after another, each starting 0.2 seconds after the previous one ends”
  • “Build an intro-then-outro animation using labels so I can replay just the outro”
  • “Create a master timeline that nests a logo animation and a menu animation”
Step-by-step guide: how to use GSAP Timeline SequencingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    gsap-timeline.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap-timeline.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-timeline.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the elements or selectors you want animated and the rough timing, so the agent can place tweens with the position parameter accurately
  • Ask for labels when the sequence has named stages, which makes later edits easier
  • Mention related skills such as gsap-core or gsap-scrolltrigger when your task spans single tweens or scroll effects

What's inside

  • SKILL.md

Redistributed unmodified from greensock/gsap-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.