https://github.com/olimot/grab-n-pinch

A simple library for panning and zooming
https://github.com/olimot/grab-n-pinch

grab pan pinch scale svg transform transformation translate zoom

Last synced: 9 days ago
JSON representation

A simple library for panning and zooming

• Host: GitHub
• URL: https://github.com/olimot/grab-n-pinch
• Owner: olimot
• Created: 2022-02-11T03:14:10.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-11T03:51:03.000Z (over 4 years ago)
• Last Synced: 2025-09-15T08:55:34.489Z (9 months ago)
• Topics: grab, pan, pinch, scale, svg, transform, transformation, translate, zoom
• Language: TypeScript
• Homepage: https://olimot.github.io/grab-n-pinch/example
• Size: 466 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Grab N' Pinch

A libarary supporting panning and zooming for both desktop and mobile devices.

## Example

https://olimot.github.io/grab-n-pinch/example

## Usage

```js

const gnp = new GrabNPinchManager({

  translate: { x: 0, y: 0 },

  scale: window.innerWidth / root.clientWidth,

  minScale: Math.min(0.5, window.innerWidth / root.clientWidth, window.innerHeight / root.clientHeight),

});

document.body.addEventListener('wheel', gnp.updateScaleInertia);

document.body.addEventListener('pointerdown', gnp.addPointer);

document.body.addEventListener('pointermove', gnp.updatePointer);

document.body.addEventListener('pointerleave', gnp.removePointer);

document.body.addEventListener('pointerup', gnp.removePointer);

let elapsed = 0;

(function raf() {

  requestAnimationFrame((time) => {

    const delta = time - elapsed;

    elapsed = time;

    gnp.run(delta);

    root.style.transformOrigin = '0 0';

    root.style.transform = `matrix(${gnp.scale}, 0, 0, ${gnp.scale}, ${gnp.translate.x},${gnp.translate.y})`;

    raf();

  });

})();

```