skills.rest
kartojal
kartojalCOMMUNITY
Explore all skills by this author →
𝕏@kartojalGitHub

gsap-timeline

Sequence GSAP tweens with position parameters, labels, and nested timelines.

11|1|Updated Mar 20, 2026
Search Tags:#timeline#animation#playback#labels#gsap#nesting#position-parameter
One-click install
npx skills add https://github.com/kartojal/openvps --skill gsap-timeline-kartojal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/kartojal/openvps/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/kartojal/openvps --skill gsap-timeline-kartojal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create clear, maintainable sequencing for multi-step animations so developers and designers avoid fragile timing hacks and excessive delays when coordinating multiple tweens or nested animations.

Core Features & Use Cases

  • Sequencing: append or place tweens precisely using the position parameter for absolute, relative, and label-based placement.
  • Defaults & inheritance: set timeline-level defaults such as duration and easing so child tweens remain consistent.
  • Labels & readability: add and use labels to jump, tweenFromTo, or make timeline choreography human-readable and easy to adjust.
  • Nesting & composition: compose complex interactions by adding child timelines to a master timeline and control playback centrally.
  • Playback control: play, pause, reverse, seek by time or progress, restart, and kill timelines for robust runtime control.
  • Best practice: prefer timelines over chained delays and attach ScrollTrigger at the timeline or top-level tween rather than inside nested animations.

Quick Start

Create a GSAP timeline that sequences three elements with a shared default duration and labels, then play it.

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 tweens into a single maintainable timeline?▼

Sequence multiple GSAP tweens by adding them to a single timeline, using the position parameter to place each tween absolutely, relatively, or at specific labels for clear choreography. This avoids fragile timing hacks and excessive delays.

What is the best way to coordinate nested timelines in GSAP for complex UI animations?▼

Coordinate complex UI animations by composing nested timelines within a master timeline. You can control playback centrally, set timeline-level defaults for consistent duration and easing, and manage child tweens without isolated delay logic.

How do labels work when managing GSAP timeline playback and sequencing?▼

Labels in a GSAP timeline provide readable markers for precise tween placement and playback control. You can use labels to jump, tweenFromTo, or adjust timeline choreography dynamically, making multi-step animations easier to maintain.

Does GSAP ScrollTrigger work with nested timeline compositions?▼

Yes, but attach ScrollTrigger at the timeline or top-level tween level rather than inside nested animations. This ensures robust scroll-driven choreographies and proper playback control over the entire multi-step sequence.

Why should I use GSAP timelines instead of chained delays for multi-step animations?▼

Timelines provide robust runtime control—play, pause, reverse, seek, and restart—while maintaining consistent defaults. Chained delays are fragile and difficult to adjust, whereas timelines support label-based sequencing and nesting for complex interactions.

Can I set shared defaults for duration and easing across a GSAP timeline?▼

Yes, you can set timeline-level defaults such as duration and easing so child tweens inherit them automatically. This ensures consistent animation choreography across multiple steps without repeating properties on every tween.

Related Skills

Explore More Design & Creative Skills→
magicpro97magicpro97
8

gsap-timeline

Create and manipulate GSAP timelines with customizable tweens and callbacks.

Community
Advanced
MicrockMicrock

gsap-scrolltrigger

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

Community
Intermediate
Aurora-AIAurora-AI
1

gsap-animation-master

Orchestrate GSAP timelines and ScrollTrigger animations with cleanup and performance practices.

Community
Advanced
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate