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.