Gsap Timeline

Handles GSAP timeline sequencing with proper position parameter usage, label management, and playback controls. You'd reach for this when chaining multiple animations instead of using delays, or when you need precise timing control for complex motion choreography. The skill emphasizes timeline defaults for inheritance and covers nesting patterns. One honest take: timelines are where GSAP really shines over CSS animations, and this skill pushes you toward the position parameter and labels rather than fighting with manual delay calculations. Includes specific guidance on ScrollTrigger placement and playback methods like tweenFromTo.

skills.sh installs: 78.8K
GitHub stars: 18.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add greensock/gsap-skills --skill gsap-timeline --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP Timeline

When to Use This Skill

Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.

Related skills: For single tweens and eases use gsap-core; for scroll-driven timelines use gsap-scrolltrigger; for React use gsap-react.

Creating a Timeline

const tl = gsap.timeline();
tl.to(".a", { x: 100, duration: 1 })
  .to(".b", { y: 50, duration: 0.5 })
  .to(".c", { opacity: 0, duration: 0.3 });

By default, tweens are appended one after another. Use the position parameter to place tweens at specific times or relative to other tweens.

Position Parameter

Third argument (or position property in vars) controls placement:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/greensock/gsap-skills
Category: Design & UI/UX

More from greensock/gsap-skills

All 8