Define a custom transition

Run Stop Open full page

Read as Markdown

Render a captured subtree with a custom synchronous alpha curve.

APIs demonstrated

• defineTransition from @pibbl/core
• PibblTransitionDefinition from @pibbl/core
• PibblTransitionRenderFrame 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 {
  pibbl,
  Rectangle,
  defineTransition,
  useVisibilityTransition,
  type PibblTransitionDefinition,
  type PibblTransitionRenderFrame,
  type PibblVisibilityTransition,
} from "@pibbl/core";

const definition: PibblTransitionDefinition = {
  render({
    context,
    progress,
    drawSource,
  }: Readonly<PibblTransitionRenderFrame>) {
    context.save();
    context.globalAlpha = progress * progress;
    drawSource();
    context.restore();
  },
};
const effect = defineTransition(definition);
const canvas = document.createElement("canvas");
canvas.width = 360;
canvas.height = 180;
document.body.append(canvas);
let transition: PibblVisibilityTransition | undefined;
function Scene() {
  transition = useVisibilityTransition({ enter: effect, duration: 1000 });
  return (
    <Rectangle
      style={{
        left: 30,
        top: 30,
        width: 260,
        height: 100,
        fill: "#b83970",
        transition: transition.binding,
      }}
    />
  );
}
const controller = pibbl(canvas, <Scene />);
const button = document.createElement("button");
button.textContent = "Toggle visibility";
button.onclick = () => {
  if (transition)
    void (transition.visible.get() ? transition.hide() : transition.show());
};
document.body.append(button);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

• The context and source are borrowed only for the synchronous render callback. Do not retain them or mutate signals while rendering.

Documentation version

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