gsap-timeline

Name: gsap-timeline
Availability: InStock
Author: DITEKmax

Sequence and control multi-step web animations with GSAP timelines.

Updated Mar 28, 2026

Search Tags:#timeline #animation #playback #gsap #nesting #scrolltrigger #position-parameter

Ready to run

npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-timeline-ditekmax

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-timeline-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill explains how to sequence, orchestrate, and control multi-step animations using GSAP timelines to avoid brittle delay-based chains and to create maintainable, readable animation flows.

Core Features & Use Cases

Timeline sequencing: append and position tweens precisely to create ordered or overlapping animation steps.
Position parameter & labels: use absolute, relative, and label-based placement for predictable timing control.
Nesting & playback control: compose nested timelines, reuse defaults, and control playback with play, pause, reverse, restart, and seeking.
Use Case: Build a landing page hero animation that staggers elements into view, overlaps motion with precise offsets, and exposes labeled segments for interactive scrubbing.

Quick Start

Create a gsap.timeline and add tweens using the position parameter and labels to sequence and overlap animations precisely.

Frequently Asked Questions about gsap-timeline

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

FAQPage Schema

How do I sequence GSAP animations without using delay?▼

Sequence GSAP animations by appending tweens to a timeline instead of using delay, creating maintainable flows where each tween's start is controlled precisely by the position parameter.

How does the position parameter work in GSAP timelines?▼

The position parameter in GSAP timelines defines exact tween placement using absolute time, relative offsets, or labels, allowing animations to overlap or chain predictably without brittle delays.

Can I nest timelines and control playback in GSAP?▼

Nest timelines in GSAP by appending child timelines to a parent, inheriting defaults, and controlling the entire sequence through playback methods like play, pause, reverse, restart, and seeking.

How do I use labels for timeline sequencing in GSAP?▼

Use labels in GSAP timeline sequencing to mark specific points, enabling label-based placement for precise tween insertion and interactive scrubbing of labeled animation segments.

Does ScrollTrigger work with nested GSAP timelines?▼

ScrollTrigger should be placed on the top-level GSAP timeline rather than nested ones, ensuring proper scroll-driven playback control over the entire choreographed animation sequence.

What is the best way to choreograph a multi-step web animation?▼

Choreograph multi-step web animations by creating a GSAP timeline to stagger elements, overlap motion with precise offsets, and expose labeled segments for interactive scrubbing.