# State-owned animation
Move a circle with a machine-owned animation task that completes into the next state.

## APIs demonstrated

- [defineMachine](/reference/functions/machines/) from `@pibbl/core/machines`
- [useMachine](/reference/hooks/use-machine/) from `@pibbl/core/machines`
- [playAnimation](/reference/functions/play-animation/) from `@pibbl/core/machines/animation`
- [MachineAnimationOptions](/reference/types/machines/) from `@pibbl/core/machines/animation`
- [MachineAnimationProgramFactory](/reference/types/machines/) from `@pibbl/core/machines/animation`

## Complete example

[Plain source](/minimal/machines/animation.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import { pibbl, Circle, signal, drive, tween } from "@pibbl/core";
import { defineMachine, useMachine } from "@pibbl/core/machines";
import {
  playAnimation,
  type MachineAnimationOptions,
  type MachineAnimationProgramFactory,
} from "@pibbl/core/machines/animation";
const x = signal(25);
type Event = { type: "REPLAY" };
const program: MachineAnimationProgramFactory<{}, Event, undefined> = () =>
  drive(x, tween({ from: 25, to: 280, duration: 1000 }));
const options: MachineAnimationOptions = { debugName: "slide" };
const definition = defineMachine<{}, Event>({
  initial: "moving",
  context: {},
  states: {
    moving: {
      invoke: { task: playAnimation(program, options), onDone: "done" },
    },
    done: { on: { REPLAY: "moving" } },
  },
});
function Scene() {
  useMachine(definition, { input: undefined });
  return <Circle style={{ left: x, top: 45, radius: 18, fill: "#087e8b" }} />;
}
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 90;
document.body.append(canvas);
const app = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Uses public package imports. Browser resources are released on pagehide.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.