Lab 03 / 04

The Conductor

Seven players, one score. A single createTimeline() with four labeled chapters — intro → build → drop → finale — under a full transport bar.

Spec 01 — The Score

7 players · 4 chapters · ease outExpo

Speed

Scrub

t=0.00s / 0.00s

const tl = createTimeline({ defaults: { ease: 'outExpo' }, autoplay: false });
tl.label('intro')
  .add('.tl-sq',   { x: [-320, 0], opacity: [0, 1], delay: stagger(180) })
  .label('build', '+=250')
  .add('.tl-circ', { scale: [0, 1], ease: 'outElastic(1, .5)' }, 'build')
  .add('#tl-bar',  { scaleX: [0, 1] }, '<<+=200')
  .label('drop', '+=350')
  .add('.tl-sq',   { y: 46, rotate: 45 }, 'drop')
  .label('finale', '+=300')
  .add('.cue-char', { y: ['130%', '0%'], delay: stagger(100) }, 'finale');
// seek by label: tl.seek(tl.labels['drop'])