Setup & Installation
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline
https://github.com/greensock/gsap-skills/tree/main/skills/gsap-timeline
View on GitHubWhat This Skill Does
GSAP Timeline is a sequencing layer on top of GSAP that lets you coordinate multiple tweens in order, in parallel, or at precise offsets using a position parameter. You can nest timelines, add named labels, set shared defaults, and control playback as a single unit.
Instead of stacking delay values on individual tweens (which break the moment any duration changes), timelines let you adjust one tween and have everything else shift automatically.
When to use it
- Sequencing a hero section where text slides in, then an image fades, then a button appears
- Running two animations at the same time by placing them at the same position parameter
- Scrubbing a multi-step animation to 50% progress on a slider input
- Reusing a child timeline for a card hover sequence inside a master page-load timeline
- Jumping playback to a named label mid-animation on a button click