# Animate changing targets
Compare a tween and spring as the same target changes.

## APIs demonstrated

- [useAnimatedValue](/reference/hooks/use-animated-value/) from `@pibbl/core`
- [spring](/reference/functions/spring/) from `@pibbl/core`
- [tween](/reference/functions/tween/) from `@pibbl/core`
- [PibblAnimatedValueOptions](/reference/types/canvas-runtime/) from `@pibbl/core`
- [PibblAnimationTarget](/reference/types/canvas-runtime/) from `@pibbl/core`

## Complete example

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

```tsx
import {
  tween,
  spring,
  pibbl,
  Circle,
  signal,
  useAnimatedValue,
  type PibblAnimationTarget,
  type PibblAnimatedValueOptions,
} from "@pibbl/core";

const target = signal(50);
const button = document.createElement("button");
button.textContent = "Move both circles";
button.onclick = () => target.update((x) => (x === 50 ? 350 : 50));
const canvas = document.createElement("canvas");
canvas.width = 420;
canvas.height = 180;
document.body.append(button, canvas);
const smooth: PibblAnimatedValueOptions<number> = {
  animation: ({ from, to }: PibblAnimationTarget<number>) =>
    tween({ from, to, duration: 600 }),
};
const bouncy: PibblAnimatedValueOptions<number> = {
  animation: spring({ stiffness: 180, damping: 12 }),
};
function Scene() {
  const tweened = useAnimatedValue(target.get(), smooth);
  const sprung = useAnimatedValue(target.get(), bouncy);
  return (
    <>
      <Circle style={{ radius: 18, left: tweened, top: 50, fill: "#087e8b" }} />
      <Circle style={{ radius: 18, left: sprung, top: 120, fill: "#b83970" }} />
    </>
  );
}
const controller = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

```

## Usage notes

- Read the target during component evaluation. The mounted hook owns the animated value and cleanup.

## Documentation version

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