Panzoom


Examples

---

Panzoom is a small library (~3.7kb gzipped) to add panning and zooming functionality to an element.
Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be _anything_: an image, a video, an iframe, a canvas, text, WHATEVER.

For common support questions, see the FAQ.

Browser support

Here is a list of currently supported browsers.

Mobile support

iOS, Android, and Windows Mobile are supported.

Panzoom includes support for touch gestures and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. It uses pointer events by default wherever supported.

SVG support

Panzoom supports panning and zooming SVG elements directly.

In IE11, CSS animations/transitions do not work on SVG elements, at least for the transform style. They do work in other browsers.

One could implement transitions manually in IE11 using the setTransform option and integrating a tweening library for javascript animations (such as tween.js).

Installing

With npm:

``bash
$ npm install --save @arcweave/panzoom
`

With yarn:

`bash
$ yarn add @arcweave/panzoom
`

Panzoom uses UMD and can be loaded a lot of ways.

With ES6 imports:

`js
import Panzoom from '@arcweave/panzoom'
`

With commonjs or browserify:

`js
const Panzoom = require('@arcweave/panzoom')
`

With an AMD loader in an anonymous module:

`js
define(['@arcweave/panzoom'], function (Panzoom) {
const elem = document.getElementById('panzoom-element')
Panzoom(elem)
})
`

With a script tag:

`html

`

With a script tag from a CDN:

`html

`

Usage

`js
const elem = document.getElementById('panzoom-element')
const panzoom = Panzoom(elem, {
maxScale: 5
})
panzoom.pan(10, 10)
panzoom.zoom(2, { animate: true })

// Panning and pinch zooming are bound automatically (unless disablePan is true).
// There are several available methods for zooming
// that can be bound on button clicks or mousewheel.
button.addEventListener('click', panzoom.zoomIn)
elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
`

FAQ

1\. What is transform-origin and why is it added to the panzoom element?

- The transform-origin is the origin from which transforms are applied. Panzoom ensures the defaults are set to what it expects to calculate focal point zooming.
- HTML elements default to '50% 50%'.
- SVG elements default to '0 0'.

2\. I am using Panzoom with an