Originally published on Homingo Learn .

A data structure is state that changes one operation at a time. Animate that state, give every item a stable id and draw each structure as a machine people already understand.

Most data structure animations are boxes sliding around a whiteboard. They show that something moved, but not why, and they get hard to follow the moment two things change at once. This guide builds animations that teach: each structure becomes a physical machine, the animation is driven by a log of operations, and only the parts that actually change are allowed to move. The code is plain TypeScript writing SVG, so the same figure works on a course page, in a lecture slide and in a 1080x1920 explainer reel.

Animate the state, not the drawing

Operations make snapshots; frames only exist between two snapshots.

Separate three things that tutorials usually mix up:

Operations: the list of what happens ( push(4) , pop() ).…