Animation examples

Animation in Nodus is just a duration: pass one to a style change or a camera move and Nodus tweens it. The demo runs live — use the buttons.

Animating styles and the camera

setAttributes(attrs, { duration, easing }) animates any visual change; camera methods take { duration } too.

// Animate colour + size over 600 ms
nodus.getNodes().setAttributes({ color: '#db2777', radius: 28 }, { duration: 600 });

// Animate the camera
await nodus.view.setZoom(3, { duration: 600 });

// Re-running a layout with a duration animates the new positions
await nodus.layouts.force({ duration: 800 });

Tween colours, sizes, zoom and layout Open in new tab ↗

Node pulse rings are a built-in looping animation set through the pulse attribute — see Node examples. For staggered, data-driven motion, call setAttributes(..., { duration }) per element or per NodeList.