ANIMATION GALLERY

anim(blocks, {
  opacity: [0, 1],
  translateX: [0, 0],
  ease: 'linear',
  autoplay: onScroll({ target: '#sdb-builder', sync: true })
});

anim(cells, {
  translateX: () => (Math.random()-.5)*400,
  translateY: () => (Math.random()-.5)*400,
  scale: [1, 0], opacity: [1, 0],
  delay: stagger(15, { grid:[6,6], from:'center' }),
  autoplay: onScroll({ target: '#sdb-disassembler', sync: true })
});

anim(obj, { w: 100, ease: 'linear',
  onUpdate: () => {
    fill.style.width = obj.w + '%';
    pct.textContent = Math.round(obj.w) + '%';
  },
  autoplay: onScroll({ target: '#sdb-progress', sync: true })
});

// Split text into word spans
words.forEach(w => span.style.opacity = 0);
anim(words, {
  opacity: [0, 1], translateY: [15, 0],
  ease: 'linear', delay: stagger(40),
  autoplay: onScroll({ target: '#sdb-textreveal', sync: true })
});

const circle = 'M100,10 C140,10 190,60...';
const star   = 'M100,10 L125,75 L195,75...';
anim(path, {
  d: [circle, star],
  ease: 'linear',
  autoplay: onScroll({ target: '#sdb-svgmorph', sync: true })
});

layers.forEach((el, i) => {
  anim(el, {
    translateY: [-200*depth, 200*depth],
    ease: 'linear',
    autoplay: onScroll({ target: '#sdb-parallax', sync: true })
  });
});

const tl = createTimeline({
  autoplay: onScroll({ target: '#sdb-timeline', sync: true })
});
tl.add(box1, { scale: [0,1] }, 0)
  .add(box2, { translateY: [50,0] }, 300)
  .add(box3, { rotate: [0,-180] }, 600);

anim(lines, {
  opacity: [0, 1], translateX: [-20, 0],
  ease: 'linear', delay: stagger(80),
  autoplay: onScroll({ target: '#sdb-terminal', sync: true })
});