Panzoom provides a web block that displays a container with a content placeholder and allows the user to pan and zoom the content within the container by using mouse or touch events. Panning and zooming is realized with CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be everything from an image or text to a canvas or iframe.

The component is suitable for both mobile and desktop browsers as it uses pointer events (https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) and falls back to touch and mouse events.

This asset is based on the JavaScript component done by Timmy Willison.

A full tutorial on how this component was built and how to use it can be found on medium: https://medium.com/itnext/panning-and-zooming-images-in-outsystems-29fefed6a4fb