Lab 04 / 04

Scroll & Drag

The scrollbar is a timeline too. The thin blue bar at the very top of this page is Spec 01 — whole-document progress via onScroll({ sync: true }). Keep going.

// SPEC 01 — PROGRESS (the 3px blue bar up top)
animate('#progress', {
  scaleX: [0, 1],
  ease: 'linear',
  autoplay: onScroll({
    target: document.body,          // whole document, window scroll
    enter: 'top top', leave: 'bottom bottom',
    sync: true,
  }),
});

Spec 02 — Parallax Field

Three layers, three speeds, one scrollbar.

animate('#layer-near', {
  y: [240, -240], ease: 'linear',
  autoplay: onScroll({
    target: '#parallax',
    enter: 'bottom top', leave: 'top bottom',
    sync: true,
  }),
});

Spec 03 — Sideways

vertical scroll in → horizontal travel out

animate('#word-track', {
  x: ['0%', '-60%'], ease: 'linear',
  autoplay: onScroll({
    target: '#sideways',
    enter: 'top top', leave: 'bottom bottom',
    sync: true,
  }),
});

Spec 04 — Triggers

One-shot counters, fired on entry.

grid cells staggered

morph points per shape

engine fps ceiling

animate(counter, {
  v: 144, modifier: utils.round(0), ease: 'outExpo',
  onUpdate: () => (el.textContent = counter.v),
  autoplay: onScroll({ target: card, repeat: false }),  // one-shot
});

Spec 05 — Drag Zone

x 0 / y 0

Throw the chips. Springs bring them to rest.

release physics — stiffness 120 / damping 14

stiffness 120

damping 14

mass 1

velocity →

createDraggable(chip, {
  container: '#drag-zone',
  releaseStiffness: 120,
  releaseDamping: 14,
  onDrag: (self) => readout(`x ${self.x} / y ${self.y}`),
  // + snap: 40 when the grid toggle is on
});