Skip to content
On this page


Panzoom exposes custom events that can be hooked on to. To set event listeners, use the on option when initializing Panzoom, or you can use the on() API method.

The first argument each listener receives is a reference to the current Panzoom instance. Use it to retrieve references to content, container, check their dimensions and get many other useful information.

const container = document.getElementById("myPanzoom");
const options = {
  click: "toggleCover",
  on: {
    afterLoad: (instance) => {
      console.log("Content has loaded successfully!");

      console.log("This is a reference to a content DOM element:");

new Panzoom(container, options);

Available Events

*Any event
initInitialization has started, plugins have been added
beforeLoadContent is loading
afterLoadContent has loaded successfully
errorContent did not load successfully
readyPanzoom has successfully launched
clickSingle click event has been detected
dblClickDouble click event has been detected
wheelWheel event has been detected
refreshContainer and content dimensions have been updated
touchStartPointer down event has been detected
touchMovePointer move event has been detected
touchEndPointer up/cancel event has been detected
decelDeceleration animation has started
mouseMoveMouse move event has been detected
startAnimationAnimation has started
endAnimationAnimation has ended
beforeTransformThe "transform" CSS property of the content will be updated.
afterTransformThe "transform" CSS property of the content has been updated
enterFSEnter full-screen mode
exitFSExit full-screen mode
destroyInstance is detroyed