How it work? (yield w)

[Aleksey-Danchin]

I wrote an example, I thought it wouldn't work. But it worked as expected. But I don't understand something.

1. Why does the swing animation continue? yield w creates some kind of thread that runs in parallel?
2. And how to stop it? dot.remove(); won't stop work, right? The dot will not be visible, but the function will continue to be called? (checked, continue)

import { Circle, makeScene2D } from "@motion-canvas/2d";
import { all, waitFor } from "@motion-canvas/core";

export default makeScene2D(function* (view) {
	const dot = (<Circle width={10} height={10} fill="white" />) as Circle;
	view.add(dot);
	dot.absolutePosition([100, 100]);

	const circle = (<Circle width={10} height={10} fill="white" />) as Circle;
	view.add(circle);

	const w = work(dot);
	yield w;

	for (let i = 0; i < 3; i++) {
		yield* waitFor(5);
		yield* all(circle.width(100, 2), circle.height(100, 2));
		yield* waitFor(5);
		yield* all(circle.width(10, 2), circle.height(10, 2));
	}
});

function* work(circle: Circle) {
	const startX = circle.x();

	while (true) {
		yield* circle.x(startX + 100, 0.5).to(startX, 0.5);
	}
}

[aarthificial]

yield w creates some kind of thread that runs in parallel?

Yes.

And how to stop it?

const task = yield myGenerator();
yield* someOtherGenerator();

cancel(task); // cancel myGenerator
yield* join(task); // wait for myGenerator to finish