skills.rest
DITEKmax
DITEKmaxCOMMUNITY
Explore all skills by this author →
GitHub

gsap-timeline

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

Updated Mar 28, 2026
Search Tags:#timeline#animation#playback#gsap#nesting#scrolltrigger#position-parameter
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-timeline-ditekmax
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yyykkkunyyykkkun

gsap-timeline

Sequence GSAP timeline animations and manage keyframes for webpages.

Community
Intermediate
MicrockMicrock

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger for pinning and scrubbing.

Community
Intermediate
skyf0xxskyf0xx
26

gsap-timeline

Coordinate multi-step animation sequences with GSAP timelines.

Community
Intermediate
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced