gsap-sequencing_skill

Overview

This skill encapsulates patterns for building complex GSAP timelines with labels, callbacks, nested timelines, and flexible position parameters. It helps orchestrate multi-step animations, coordinate modular animation modules, and manage playback, scrubbing, repeats, and debugging. Use it to create cinematic sequences and finely choreographed UI motion.

How this skill works

The skill provides recipes and helper patterns for constructing gsap.timeline instances, adding labels, nesting child timelines, and using absolute or relative position parameters to align entries. It demonstrates lifecycle callbacks, inline .call usage, time controls (seek, timeScale, reversed), and repeat/yoyo behaviors. Examples include modular factories that return timelines, page transitions, orchestrated dashboard reveals, countdown sequences, and debugging techniques.

When to use it

• Orchestrating a multi-part entrance or transition that must stay in sync
• Composing reusable animation modules across pages or components
• Overlapping animations precisely using labels and position parameters
• Creating scrubbable or interactive timelines (sliders, scrubbing)
• Building looping or yoyo animation patterns with repeat and repeatDelay

Best practices

• Use defaults on timelines to centralize duration and easing for consistency
• Return child timelines from functions for modular composition and easy testing
• Prefer labels and named position offsets over hard-coded seconds for readable sequencing
• Use .call for side effects (state updates, DOM swaps) instead of embedding logic in tweens
• Slow timeScale during development and use tl.getChildren() to inspect children when debugging

Example use cases

• Page transition that exits one view, plays an overlay, swaps content, then enters the next view
• Dashboard reveal that staggers header, sidebar, cards, charts, and CTA with labeled offsets
• Reusable animation modules (fadeIn, staggerIn, scaleIn) composed into a master timeline
• Countdown or temporal collapse sequences where digits flip and intensity builds toward zero
• Scrubbable progress bar tied to a slider controlling tl.progress()