View on GitHub

Panzoom

A library for panning and zooming elements using CSS transforms.

Download this project as a .zip file Download this project as a tar.gz file

Drag and zoom any element

View the demo.

Panzoom is a small library 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.

Mobile support

Panzoom uses [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) and falls back to touch and mouse events.

It even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers.

SVG support

Panzoom supports panning and zooming SVG elements directly, with the caveat that CSS transitions on SVG do not work in IE.

More info

Panzoom is incredibly customizable. Some features include:

For more information, documentation is available in the README.