gsap-timeline

Sequences GSAP tweens into timelines using position parameters, labels, and nesting.

Updated May 23, 2026
One-click install
npx skills add https://github.com/Oatse/CWE-Automation --skill gsap-timeline-oatse
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/Oatse/CWE-Automation/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/Oatse/CWE-Automation --skill gsap-timeline-oatse

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Coordinating multiple animations with chained delays is fragile and hard to maintain. This Skill provides the official GSAP patterns for sequencing tweens with gsap.timeline(), so animations run in a controlled, readable order. ## Core Features & Use Cases - Timeline Sequencing: Create timelines that append tweens in order and place them precisely with the position parameter (absolute times, relative offsets, labels, "<" and ">" placement). - Labels, Defaults, and Nesting: Use addLabel() for readable sequencing, constructor defaults so child tweens inherit duration and ease, and nest child timelines inside a master timeline. - Playback Control: Play, pause, reverse, restart, seek with time() and progress(), and kill timelines. - Use Case: Build a page intro where a logo slides in, a headline fades up 0.2s later, and a button scales in at the same time as the headline, all orchestrated by one timeline with labels. ## Quick Start Create a GSAP timeline that fades in a header, then slides in a card 0.3 seconds later, using the position parameter and a shared default ease.

Frequently Asked Questions about gsap-timeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sequence multiple GSAP animations in order?

Create a timeline with gsap.timeline() and chain .to() calls; tweens are appended one after another by default. Use the position parameter as the third argument to place tweens at absolute times, relative offsets like "+=0.5", or labels.

What is the GSAP position parameter and how does it work?

The position parameter controls where a tween is placed in a timeline. It accepts absolute times like 1, relative offsets like "+=0.5" or "-=0.2", label names, and placement shortcuts "<" (start with previous) and ">" (after previous ends).

Can I nest GSAP timelines inside other timelines?

Yes, timelines can contain other timelines. Build a child timeline with its own tweens, then add it to a master timeline with master.add(child, position) to compose complex sequences from reusable parts.

Should I use ScrollTrigger on tweens inside a timeline?

No, ScrollTrigger should be placed on the timeline itself or on top-level tweens, never on tweens nested inside a timeline. Nesting ScrollTriggers inside timelines causes conflicting scroll-driven behavior.

When should I use a timeline instead of chained delays in GSAP?

Use a timeline whenever you sequence multiple tweens instead of chaining delay values. Timelines give you the position parameter, labels, shared defaults, and unified playback controls like play(), reverse(), and seek.