gsap-timeline
Installation
Summary
Sequence and choreograph multi-step animations with precise timing control and nested timelines.
- Position parameter places tweens at absolute times, relative offsets, labels, or relative to other animations using
+=,-=,<,>, and label syntax - Timeline defaults inherit duration, ease, and other properties to all child tweens, reducing repetition across sequences
- Labels provide readable waypoints for complex animations; seek to labels or use them as position anchors for new tweens
- Nested timelines allow composition of reusable animation sequences into master timelines for modular choreography
- Playback control includes play, pause, reverse, restart, seek by time or progress, and kill with optional child cleanup
SKILL.md
GSAP Timeline
When to Use This Skill
Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.
Related skills: For single tweens and eases use gsap-core; for scroll-driven timelines use gsap-scrolltrigger; for React use gsap-react.
Creating a Timeline
const tl = gsap.timeline();
tl.to(".a", { x: 100, duration: 1 })
.to(".b", { y: 50, duration: 0.5 })
.to(".c", { opacity: 0, duration: 0.3 });
By default, tweens are appended one after another. Use the position parameter to place tweens at specific times or relative to other tweens.
Explore more of GLSRM