skills.rest
KKChen666
KKChen666COMMUNITY
Explore all skills by this author →
GitHub

gsap-timeline

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

Updated Jun 17, 2026
Search Tags:#timeline#frontend#javascript#animation#gsap#sequencing#tween
One-click install
npx skills add https://github.com/KKChen666/TongXiao --skill gsap-timeline-kkchen666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/KKChen666/TongXiao/tree/main/.opencode/skills/gsap-timeline
Command: npx skills add https://github.com/KKChen666/TongXiao --skill gsap-timeline-kkchen666

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 timeline patterns for sequencing, overlapping, and controlling multi-step animations declaratively. ## Core Features & Use Cases - Timeline Sequencing: Create timelines with gsap.timeline() and place tweens precisely using the position parameter (absolute times, relative offsets, labels, "<" and ">" placement). - Labels, Defaults & Nesting: Add labels with addLabel(), share defaults across child tweens, and nest child timelines inside a master timeline. - Playback Control: Play, pause, reverse, restart, seek with time() or progress(), and use tweenFromTo() to animate between labels. - Use Case: When building a landing page hero animation where a logo fades in, text slides up, and a button scales in with overlap, use this Skill to choreograph the sequence with a single timeline instead of stacked delays. ## Quick Start Ask the AI to build a GSAP timeline that fades in a header, slides up the content 0.2 seconds before the header finishes, and then reveals a call-to-action button using labels and the position parameter.

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 run one after another by default. Use the position parameter as the third argument to overlap or offset tweens, such as "+=0.5" or "<".

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

The position parameter is the third argument of timeline methods that controls when a tween starts. It accepts absolute times, relative offsets like "-=0.2", label names, and placement shortcuts like "<" (start with previous) and ">" (after previous).

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 a top-level tween, never on tweens nested inside a timeline. Nested ScrollTriggers conflict with the timeline's control of its children's playheads.

Why use a GSAP timeline instead of chaining delays?▼

Timelines keep sequencing declarative and maintainable, letting you reposition tweens with the position parameter and labels instead of recalculating delay values. They also provide unified playback control like play(), reverse(), and seek.

Related Skills

Explore More Software Engineering Skills→
woxiangyangzhimaowoxiangyangzhimao
3

gsap-core

Explains how to use GDAP's core features for web animations.

Community
Intermediate
Hendo10XHendo10X

gsap

Create GSAP animations with timelines, ScrollTrigger, and React integration.

Community
Advanced
brunoolfbrunoolf

gsap-timeline

Sequences and choreographs GSAP animations using timelines, labels, and the position parameter.

Community
Intermediate
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced