When does animation happen

First attempt at animation in svg.js. Very straightforward, and it works fine standalone. Just animate drawing a line from A to B. Start with a zero length line at A, animate the endpoint to B, animate the start point to B. My use of a 4th arg (linear easing '-') to animate() came from looking at one of the examples for svg.js on CodePen - I didn't see it documented this way.

let beam = canvas.line(new SVG.PointArray(
    [[100, 100], [100, 100]]
    ));
beam.stroke({ width: 10, color: '#00ff00', linecap: 'round' });
  
beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray(
    [[100, 100], [200, 200]]
    ));

beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray(
    [[200, 200], [200, 200]]
    ));

Trying to use this in the context of the real app, though, I see nothing happening. No line, no nothing. One thought I had was that this code gets called (in the client) from an event listener, and the server may fling a lot of messages to the client in rapid succession - the animation for any one of them will last longer than the time between incoming message events. The animations don't have to happen in perfect synchronicity with the messages, they just have to all happen in order eventually.

I'm not clear on when the animation happens in the main event loop. That is, how it competes with other events like mouse clicks/movement, socket.io messages, etc. I haven't yet found a good primer on how this all works so I'm looking for pointers to material I can read on it, along with any thoughts on how I should debug the lines not showing up.

Solution

How can you tell when an animation has finished?

let runner = beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray(
    [[200, 200], [200, 200]]
    ));
runner.on('finish', myFunction);

runner.after(myFunction);