Gsap Timeline

If you're sequencing multiple GSAP animations, this is how you avoid stacking delays everywhere. It gives you timeline(), the position parameter for placing tweens relative to each other or at labels, and proper nesting. The position shortcuts like "<" (start with previous) and ">" (start after previous) alone will clean up most animation choreography code. Pass defaults into the constructor so child tweens inherit duration and easing without repeating yourself. One thing to remember: put ScrollTrigger on the timeline itself, not on individual tweens inside it, or you'll have a bad time debugging.

skills.sh installs: 2.9K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill gsap-timeline --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP Timeline

Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills

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/nexu-io/open-design
Category: Design & UI/UX
First seen: Jun 3, 2026