pinch-zoom-pan

A simple module that add pinch-zoom and pan to your HTML element.

Usage no npm install needed!

<script type="module">
  import pinchZoomPan from 'https://cdn.skypack.dev/pinch-zoom-pan';
</script>

README

pinch-zoom-pan

A simple module that add pinch-zoom and pan to your HTML element.

Using

npm i -S pinch-zoom-pan

<div class="root" id="root">
  <div class="point">
    <div class="canvas">
      <!-- your content here -->
    </div>
  </div>
</div>

.root {
  position: relative;
  transform: translateZ(0);
  overflow: hidden;
}

.point {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(0, 0) scale(1);
  transform-origin: center;
  will-change: transform;
}

.canvas {
  position: absolute;
  transform: translate(-50%, -50%);
}

import { create } from 'pinch-zoom-pan';
create({ element: document.getElementById('root') });

Frameworks & libraries