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 multi-step animations stay readable, controllable, and easy to adjust. ## Core Features & Use Cases - Timeline creation and sequencing: Build timelines with gsap.timeline() and place tweens precisely using the position parameter (absolute times, relative offsets like "+=0.5", and "<"/">" placement). - Labels and defaults: Add named labels with addLabel() for readable sequencing and pass shared defaults (duration, ease) to all child tweens via the constructor. - Nesting and playback control: Nest child timelines inside a master timeline and control playback with play(), pause(), reverse(), restart(), time(), progress(), and kill(). - Use Case: When building a landing page hero animation where a logo fades in, text slides up, and a button appears in sequence, use a timeline with labels and the position parameter instead of chained setTimeout or delay values. ## Quick Start Create a GSAP timeline that fades in the header, then slides up the content 0.2 seconds before the header animation ends, using labels and shared defaults.
