0%

Robotic arm in motion.

It assembles

npm i robotic-arm Explore ↓

The complete arm toolbox

Every joint, pulled apart and named.

PLINTH YAW BASE COLLAR SHOULDER MAIN ARM ELBOW SUB ARM HEAD

Scroll Observer

Synchronise the arm to the scroll position, in both directions, with one bound value. 

const observer = onScroll({
  target: sectionEl,
  axis: 'y',
  sync: true,
  enter: 'top top',
  leave: 'bottom bottom',
});

Runs like clockwork

One requestAnimationFrame owns the clock. anime.js updates values, three.js draws them — never the other way round. 

engine.useDefaultMainLoop = false;

function tick(now) {
  engine.update();
  for (const cb of callbacks) cb(dt, elapsed);
  renderer.render(scene, camera);
}

Start animating.

Everything on this page is one gltf, one RAF loop and one scrub value.