Animate changing targets

Compare a tween and spring as the same target changes.

APIs demonstrated

useAnimatedValue from @pibbl/core
spring from @pibbl/core
tween from @pibbl/core
PibblAnimatedValueOptions from @pibbl/core
PibblAnimationTarget from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

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 2dccb19. ALPHA — NOT FOR PRODUCTION USE.