Panscale

Install the packages:

pnpm add @panscale/core @panscale/web transformation-matrix

Quick Start

import { createWebScaler } from "@panscale/web";

const container = document.getElementById("viewport")!;

const { scaler, destroy } = createWebScaler(container, {
  callback(values) {
    const content = container.querySelector(".content") as HTMLElement;
    content.style.transform = `translate(${values.translateX}px, ${values.translateY}px) scale(${values.zoom})`;
  },
  zooming: true,
  bouncing: true
});

// Clean up when done
// destroy();

On this page