gsap-timeline

Coordinate GSAP tweens into timelines with gsap.timeline() and position parameters.

1|Updated Feb 8, 2026

Search Tags:#timeline #frontend #animation #playback #gsap #nesting #sequencing

Ready to run

npx skills add https://github.com/0monish/portfolio-vivek-kamani --skill gsap-timeline-0monish

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/0monish/portfolio-vivek-kamani/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/0monish/portfolio-vivek-kamani --skill gsap-timeline-0monish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The GSAP Timeline skill helps developers coordinate multiple tweens by organizing them into a single timeline, enabling deterministic sequencing and easier maintenance.

Core Features & Use Cases

Create timelines with gsap.timeline() and chain tweens with .to()/.from().
Use the position parameter and labels to place animations precisely in time and synchronize actions.
Nest timelines for modular, reusable animation structures and complex choreography.
Control playback (play, pause, reverse, seek) to orchestrate UI interactions and onboarding sequences.

Quick Start

Create a timeline with gsap.timeline(), add animations with .to() or .from(), and control its playback to orchestrate your UI animations.

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 a specific order?▼

You sequence GSAP animations by organizing multiple tweens into a single timeline using gsap.timeline(), ensuring deterministic playback order for complex UI interactions and onboarding flows.

What is the position parameter in GSAP timelines used for?▼

The position parameter places animations precisely in time within a GSAP timeline, allowing you to synchronize actions and control exactly when tweens start relative to other sequence elements.

Can I nest timelines in GSAP for modular animation structures?▼

Yes, nesting timelines in GSAP creates modular, reusable animation structures. You embed smaller timelines within a master timeline to build complex choreography while maintaining organized, deterministic sequencing.

How do I control playback of a GSAP timeline for onboarding flows?▼

Control GSAP timeline playback using play, pause, reverse, and seek methods to orchestrate onboarding sequences and UI interactions by manipulating the timeline's progression dynamically.

How do I use labels to synchronize actions in a GSAP timeline?▼

Use labels in a GSAP timeline to mark specific time points, allowing you to synchronize actions and place animations precisely. Labels provide named reference points for deterministic sequencing.