gsap-timeline

Sequence GSAP animations into reusable timelines with labels and playback control.

Updated Jun 4, 2026
One-click install
npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-timeline-carlosfwd86
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/Carlosfwd86/Conectando-Talento-UCR/tree/main/Skill%20GSAP/gsap-skills/skills/gsap-timeline
Command: npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-timeline-carlosfwd86

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you choreograph complex animation sequences without relying on brittle delays, making motion timing easier to design, maintain, and reuse.

Core Features & Use Cases

  • Timeline Construction: Build multi-step animations with gsap.timeline() so tweens run in sequence or overlap intentionally.
  • Position Control: Use labels and position parameters to place animations exactly where they should start.
  • Playback Management: Pause, play, reverse, restart, seek, and nest timelines for interactive or staged motion systems.
  • Use Case: A product landing page intro can animate the logo, headline, and call-to-action in a controlled order while keeping the sequence readable and easy to edit.

Quick Start

Ask for a GSAP timeline that sequences several animations with labels, defaults, and playback control.

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 without using brittle delays?▼

To sequence GSAP animations without brittle delays, use a timeline to choreograph multi-step motion. This lets tweens run in series or overlap intentionally, making timing easier to design, maintain, and reuse.

What is the best way to control GSAP animation playback order?▼

Controlling GSAP animation playback order is best handled using labels and position parameters within a timeline. These features place animations exactly where they should start, overriding default sequencing for precise choreography.

Can I nest child timelines inside a main GSAP timeline?▼

Yes, you can nest child timelines within a main GSAP timeline. This allows you to build modular motion systems, coordinate complex tween sequences, and control the entire nested structure through a single parent playhead.

How do I pause, reverse, or restart a GSAP timeline animation?▼

You can pause, play, reverse, restart, and seek through a GSAP timeline using built-in playback management methods. These controls enable interactive or staged motion systems by directly manipulating the timeline playhead.

Does GSAP timeline support applying default properties to all tweens?▼

Yes, GSAP timelines support defaults inheritance. You can define default properties when constructing the timeline, which automatically apply to all included tweens, keeping your animation sequence readable and easy to edit.