skills.rest
KryptaMedina7
KryptaMedina7COMMUNITY
Explore all skills by this author →
GitHub

gsap-timeline

Sequences GSAP tweens into timelines using position parameters, labels, and nesting.

Updated Aug 10, 2026
Search Tags:#timeline#frontend#javascript#animation#gsap#sequencing#tween
One-click install
npx skills add https://github.com/KryptaMedina7/quero-s-home --skill gsap-timeline-kryptamedina7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/KryptaMedina7/quero-s-home/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/KryptaMedina7/quero-s-home --skill gsap-timeline-kryptamedina7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Coordinating multiple animations with chained delays is fragile and hard to maintain. This Skill provides the official GSAP patterns for sequencing tweens with gsap.timeline(), so animations run in a controlled, readable order. ## Core Features & Use Cases - Timeline Sequencing: Append tweens in order or place them precisely with the position parameter (absolute times, relative offsets, labels, "<" and ">" placement). - Labels, Defaults & Nesting: Use addLabel() for readable choreography, constructor defaults for shared duration/ease, and nest child timelines inside a master timeline. - Playback Control: Play, pause, reverse, restart, seek with time()/progress(), and kill timelines and their children. - Use Case: Build a hero intro where a logo fades in, a headline slides up 0.2s later, and a CTA appears at the "outro" label, all controlled from one timeline. ## Quick Start Create a GSAP timeline that fades in the header, then slides the content up 0.3 seconds later using the position parameter.

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 in order?▼

Create a timeline with gsap.timeline() and chain .to() calls; tweens run one after another by default. Use the position parameter as the third argument to overlap or offset tweens precisely.

What is the GSAP position parameter and how does it work?▼

The position parameter is the third argument of timeline methods controlling when a tween starts. It accepts absolute times, relative offsets like "+=0.5", labels, and "<" or ">" to align with the previous tween's start or end.

Can I nest GSAP timelines inside other timelines?▼

Yes, timelines can contain other timelines via master.add(child, position). However, nested animations must not contain ScrollTriggers; ScrollTrigger belongs only on top-level tweens or timelines.

Should I use chained delays or a GSAP timeline for multi-step animation?▼

Use a timeline. Chaining animations with delay is discouraged because timelines provide sequencing, labels, shared defaults, and centralized playback control that delays cannot offer.

How do I control GSAP timeline playback like seeking or reversing?▼

Use tl.play(), tl.pause(), tl.reverse(), and tl.restart() for playback. Seek with tl.time(seconds) or tl.progress(0-1), and use tl.tweenFromTo() to animate the playhead between two labels.

Related Skills

Explore More Software Engineering Skills→
karenrebecagkarenrebecag

gsap-core

Animate CSS properties and sequences with GSAP tween methods.

Community
Advanced
calesthiocalesthio
55.1k

gsap-scrolltrigger

Implements scroll-linked animations, pinning, and scrubbing with the GSAP ScrollTrigger plugin.

Community
Intermediate
gtpgg1013gtpgg1013

gsap-fundamentals

Create GSAP tweens, timelines, and stagger effects for web interfaces.

Community
Intermediate
nexu-ionexu-io
93.2k

gsap-timeline

Sequence complex web animations using GSAP timeline methods and position parameters.

Official
Intermediate