diff --git a/package-lock.json b/package-lock.json
index b905b0400b6c3cd7200856719f2f9bf342b06c4a..8c4a2cd40513fe340d64273182ca37464a2de5e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15018,7 +15018,15 @@
     },
     "packages/lib": {
       "name": "@sc07-canvas/lib",
-      "version": "1.0.0"
+      "version": "1.0.0",
+      "dependencies": {
+        "eventemitter3": "^5.0.1"
+      }
+    },
+    "packages/lib/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
     },
     "packages/server": {
       "name": "@sc07-canvas/server",
diff --git a/packages/client-next/gulpfile.js b/packages/client-next/gulpfile.js
index 63cd6e07aa7582b809f6700d5fd08ae6ce73ffdb..50344db1a6452cad44596baf2f8ab86675610aac 100644
--- a/packages/client-next/gulpfile.js
+++ b/packages/client-next/gulpfile.js
@@ -20,7 +20,15 @@ gulp.task("js", function () {
 gulp.task(
   "watch",
   gulp.series("js", "css", function () {
-    gulp.watch(["src/**/*.ts", "src/**/*.tsx"], gulp.series("js"));
+    gulp.watch(
+      [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "../lib/src/**/*.ts",
+        "../lib/src/**/*.tsx",
+      ],
+      gulp.series("js")
+    );
     gulp.watch("src/**/*.scss", gulp.series("css"));
   })
 );
diff --git a/packages/client-next/src/board.scss b/packages/client-next/src/board.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1f17dd98f034df406d4e4453bb7695ba8ab02297
--- /dev/null
+++ b/packages/client-next/src/board.scss
@@ -0,0 +1,25 @@
+.board-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.debug-point {
+  position: fixed;
+  z-index: 9999;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #ff0000;
+  opacity: 0.5;
+  pointer-events: none;
+  touch-action: none;
+}
diff --git a/packages/client-next/src/components/CanvasWrapper.tsx b/packages/client-next/src/components/CanvasWrapper.tsx
index 389269ed284e5932c76d13942c47492ce3a26311..56a6da909f8681aabdd1fa7cc399ff87092d9ac3 100644
--- a/packages/client-next/src/components/CanvasWrapper.tsx
+++ b/packages/client-next/src/components/CanvasWrapper.tsx
@@ -8,33 +8,15 @@ import {
 import { Canvas } from "../lib/canvas";
 import { useAppContext } from "../contexts/AppContext";
 import throttle from "lodash.throttle";
+import { PanZoomWrapper } from "@sc07-canvas/lib/src/renderer";
 
 export const CanvasWrapper = () => {
   // to prevent safari from blurring things, use the zoom css property
   return (
     <main>
-      <TransformWrapper
-        centerOnInit
-        limitToBounds={false}
-        centerZoomedOut={false}
-        minScale={0.5}
-        maxScale={50}
-        wheel={{
-          step: 0.05,
-          smoothStep: 0.05,
-        }}
-        initialScale={5}
-        panning={{
-          velocityDisabled: true,
-        }}
-        doubleClick={{
-          disabled: true,
-        }}
-      >
-        <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }}>
-          <CanvasInner />
-        </TransformComponent>
-      </TransformWrapper>
+      <PanZoomWrapper>
+        <CanvasInner />
+      </PanZoomWrapper>
     </main>
   );
 };
@@ -42,28 +24,28 @@ export const CanvasWrapper = () => {
 const CanvasInner = () => {
   const canvasRef = createRef<HTMLCanvasElement>();
   const { config } = useAppContext();
-  const { centerView } = useControls();
+  // const { centerView } = useControls();
 
-  useTransformEffect(
-    throttle(({ state, instance }) => {
-      const params = new URLSearchParams();
-      params.set("x", state.positionX + "");
-      params.set("y", state.positionY + "");
-      params.set("zoom", state.scale + "");
-      window.location.hash = params.toString();
-    }, 1000)
-  );
+  // useTransformEffect(
+  //   throttle(({ state, instance }) => {
+  //     const params = new URLSearchParams();
+  //     params.set("x", state.positionX + "");
+  //     params.set("y", state.positionY + "");
+  //     params.set("zoom", state.scale + "");
+  //     window.location.hash = params.toString();
+  //   }, 1000)
+  // );
 
   useEffect(() => {
     if (!config.canvas || !canvasRef.current) return;
     const canvas = canvasRef.current!;
     const canvasInstance = new Canvas(config, canvas);
-    centerView();
+    // centerView();
 
     return () => {
       canvasInstance.destroy();
     };
-  }, [canvasRef, centerView, config]);
+  }, [canvasRef, config]);
 
   return (
     <canvas
diff --git a/packages/client-next/src/components/renderer/PanZoomWrapper.tsx b/packages/client-next/src/components/renderer/PanZoomWrapper.tsx
deleted file mode 100644
index 49f9d63a1969dc974cabe1c5a9ce0883c5ada484..0000000000000000000000000000000000000000
--- a/packages/client-next/src/components/renderer/PanZoomWrapper.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-export const PanZoomWrapper = ({ children }: { children: React.ReactNode }) => {
-  return <div className="test-wrapper">{children}</div>;
-};
diff --git a/packages/client-next/src/style.scss b/packages/client-next/src/style.scss
index 75d2cd4111b55ccbc7117a9ddc497419b198fb87..83c74a842910f5b0ae5a3368ae1ad5f9ccc74316 100644
--- a/packages/client-next/src/style.scss
+++ b/packages/client-next/src/style.scss
@@ -116,3 +116,4 @@ main {
 }
 
 @import "./components/Pallete.scss";
+@import "./board.scss";
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 4550c3918fe0befa24363cc12cdced64d377f6ab..2132803a64b94da74666e3c8b51637fb406752a4 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -1,5 +1,8 @@
 {
   "name": "@sc07-canvas/lib",
   "version": "1.0.0",
-  "main": "./src/index.ts"
+  "main": "./src/index.ts",
+  "dependencies": {
+    "eventemitter3": "^5.0.1"
+  }
 }
diff --git a/packages/lib/src/renderer/PanZoom.ts b/packages/lib/src/renderer/PanZoom.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd4980d3272cdbb46b8f037bf9e136e60238c849
--- /dev/null
+++ b/packages/lib/src/renderer/PanZoom.ts
@@ -0,0 +1,379 @@
+import EventEmitter from "eventemitter3";
+import {
+  calculatePinchZoom,
+  calculateTouchMidPoint,
+  getTouchDistance,
+} from "./lib/pinch.utils";
+import {
+  checkZoomBounds,
+  handleCalculateZoomPositions,
+} from "./lib/zoom.utils";
+import { Panning } from "./lib/panning.utils";
+
+interface TransformState {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+interface Flags {
+  useZoom: boolean;
+}
+
+interface TouchState {
+  lastTouch: number | null;
+  pinchStartDistance: number | null;
+  lastDistance: number | null;
+  pinchStartScale: number | null;
+  pinchMidpoint: { x: number; y: number } | null;
+}
+
+interface MouseState {}
+
+interface ISetup {
+  scale: [number, number];
+}
+
+interface PanZoomEvents {
+  doubleTap: (e: TouchEvent) => void;
+}
+
+export class PanZoom extends EventEmitter<PanZoomEvents> {
+  public $wrapper: HTMLDivElement = null as any;
+  public $zoom: HTMLDivElement = null as any;
+  public $move: HTMLDivElement = null as any;
+
+  public transform: TransformState;
+  public touch: TouchState;
+  public mouse: MouseState;
+  public setup: ISetup;
+  public flags: Flags;
+
+  public panning: Panning;
+
+  constructor() {
+    super();
+
+    this.transform = {
+      scale: 1,
+      x: 0,
+      y: 0,
+    };
+
+    this.touch = {
+      lastTouch: null,
+      pinchStartDistance: null,
+      lastDistance: null,
+      pinchStartScale: null,
+      pinchMidpoint: null,
+    };
+
+    this.mouse = {};
+
+    this.panning = new Panning(this);
+
+    this.setup = {
+      scale: [1, 50],
+    };
+
+    this.flags = {
+      useZoom: false,
+    };
+  }
+
+  initialize(
+    $wrapper: HTMLDivElement,
+    $zoom: HTMLDivElement,
+    $move: HTMLDivElement
+  ) {
+    this.$wrapper = $wrapper;
+    this.$zoom = $zoom;
+    this.$move = $move;
+
+    this.detectFlags();
+    this.registerMouseEvents();
+    this.registerTouchEvents();
+  }
+
+  detectFlags() {
+    // Pxls/resources/public/include/helpers.js
+    let haveZoomRendering = false;
+    let haveImageRendering = false;
+    const webkitBased = navigator.userAgent.match(/AppleWebKit/i);
+    const iOSSafari =
+      navigator.userAgent.match(/(iPod|iPhone|iPad)/i) && webkitBased;
+    const desktopSafari =
+      navigator.userAgent.match(/safari/i) &&
+      !navigator.userAgent.match(/chrome/i);
+    const msEdge = navigator.userAgent.indexOf("Edge") > -1;
+    const possiblyMobile =
+      window.innerWidth < 768 && navigator.userAgent.includes("Mobile");
+    if (iOSSafari) {
+      const iOS =
+        parseFloat(
+          (
+            "" +
+            (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(
+              navigator.userAgent
+            ) || [0, ""])[1]
+          )
+            .replace("undefined", "3_2")
+            .replace("_", ".")
+            .replace("_", "")
+        ) || false;
+      haveImageRendering = false;
+      if (iOS && iOS >= 11) {
+        haveZoomRendering = true;
+      }
+    } else if (desktopSafari) {
+      haveImageRendering = false;
+      haveZoomRendering = true;
+    }
+    if (msEdge) {
+      haveImageRendering = false;
+    }
+
+    this.flags.useZoom = haveZoomRendering;
+  }
+
+  registerTouchEvents() {
+    this.$wrapper.addEventListener(
+      "touchstart",
+      (event) => {
+        const isDoubleTap =
+          this.touch.lastTouch && +new Date() - this.touch.lastTouch < 200;
+
+        if (isDoubleTap && event.touches.length === 1) {
+          this.emit("doubleTap", event);
+        } else {
+          this.touch.lastTouch = +new Date();
+
+          const { touches } = event;
+
+          const isPanningAction = touches.length === 1;
+          const isPinchAction = touches.length === 2;
+
+          if (isPanningAction) {
+            this.panning.start(touches[0].clientX, touches[0].clientY);
+          }
+          if (isPinchAction) {
+            this.onPinchStart(event);
+          }
+        }
+      },
+      { passive: false }
+    );
+
+    this.$wrapper.addEventListener("touchmove", (event) => {
+      if (this.panning.enabled && event.touches.length === 1) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const touch = event.touches[0];
+
+        this.panning.move(touch.clientX, touch.clientY);
+      } else if (event.touches.length > 1) {
+        this.onPinch(event);
+      }
+    });
+
+    this.$wrapper.addEventListener("touchend", (event) => {
+      if (this.panning.enabled) {
+        this.panning.enabled = false;
+
+        const touch = event.changedTouches[0];
+
+        this.panning.end(touch.clientX, touch.clientY);
+      }
+    });
+  }
+
+  /// /////
+  // pinch
+  /// /////
+
+  onPinchStart(event: TouchEvent) {
+    const distance = getTouchDistance(event);
+
+    this.touch.pinchStartDistance = distance;
+    this.touch.lastDistance = distance;
+    this.touch.pinchStartScale = this.transform.scale;
+    this.panning.enabled = false;
+  }
+
+  onPinch(event: TouchEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { scale } = this.transform;
+
+    // one finger started from outside the wrapper
+    if (this.touch.pinchStartDistance === null) return;
+
+    let el: HTMLElement = document.body;
+    // switch (
+    //   (document.getElementById("test-flag")! as HTMLSelectElement).value
+    // ) {
+    //   case "body":
+    //     el = document.body;
+    //     break;
+    //   case "wrapper":
+    //     el = this.$wrapper;
+    //     break;
+    //   case "move":
+    //     el = this.$move;
+    //     break;
+    //   default:
+    //   case "zoom":
+    //     el = this.$zoom;
+    //     break;
+    // }
+
+    const midPoint = calculateTouchMidPoint(this, event, scale, el);
+
+    if (!Number.isFinite(midPoint.x) || !Number.isFinite(midPoint.y)) return;
+
+    const currentDistance = getTouchDistance(event);
+    const newScale = calculatePinchZoom(this, currentDistance);
+
+    if (newScale === scale) return;
+
+    const { x, y } = handleCalculateZoomPositions(
+      this,
+      midPoint.x,
+      midPoint.y,
+      newScale
+    );
+
+    this.touch.pinchMidpoint = midPoint;
+    this.touch.lastDistance = currentDistance;
+
+    this.debug(midPoint.x, midPoint.y, "midpoint");
+
+    this.transform.x = midPoint.x / newScale - midPoint.x / scale;
+    this.transform.y = midPoint.y / newScale - midPoint.x / scale;
+    this.transform.scale = newScale;
+    this.update();
+  }
+
+  debug(x: number, y: number, id?: string) {
+    // if (document.getElementById("debug-" + id)) {
+    //   document.getElementById("debug-" + id)!.style.top = y + "px";
+    //   document.getElementById("debug-" + id)!.style.left = x + "px";
+    //   return;
+    // }
+    // let el = document.createElement("div");
+    // if (id) el.id = "debug-" + id;
+    // el.classList.add("debug-point");
+    // el.style.setProperty("top", y + "px");
+    // el.style.setProperty("left", x + "px");
+    // document.body.appendChild(el);
+  }
+
+  registerMouseEvents() {
+    // zoom
+    this.$wrapper.addEventListener(
+      "wheel",
+      (e) => {
+        // if (!self.allowDrag) return;
+        const oldScale = this.transform.scale;
+
+        let delta = -e.deltaY;
+
+        switch (e.deltaMode) {
+          case WheelEvent.DOM_DELTA_PIXEL:
+            // 53 pixels is the default chrome gives for a wheel scroll.
+            delta /= 53;
+            break;
+          case WheelEvent.DOM_DELTA_LINE:
+            // default case on Firefox, three lines is default number.
+            delta /= 3;
+            break;
+          case WheelEvent.DOM_DELTA_PAGE:
+            delta = Math.sign(delta);
+            break;
+        }
+
+        this.nudgeScale(delta);
+
+        const scale = this.transform.scale;
+        if (oldScale !== scale) {
+          const dx = e.clientX - this.$wrapper.clientWidth / 2;
+          const dy = e.clientY - this.$wrapper.clientHeight / 2;
+          this.transform.x -= dx / oldScale;
+          this.transform.x += dx / scale;
+          this.transform.y -= dy / oldScale;
+          this.transform.y += dy / scale;
+          this.update();
+          // place.update();
+        }
+      },
+      { passive: true }
+    );
+
+    this.$wrapper.addEventListener(
+      "mousedown",
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.panning.start(e.clientX, e.clientY);
+      },
+      { passive: false }
+    );
+
+    this.$wrapper.addEventListener(
+      "mousemove",
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!this.panning.enabled) return;
+
+        this.panning.move(e.clientX, e.clientY);
+      },
+      { passive: false }
+    );
+
+    this.$wrapper.addEventListener(
+      "mouseup",
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.panning.end(e.clientX, e.clientY);
+      },
+      { passive: false }
+    );
+  }
+
+  update() {
+    if (this.flags.useZoom) {
+      this.$zoom.style.setProperty("zoom", this.transform.scale * 100 + "%");
+    } else {
+      this.$zoom.style.setProperty(
+        "transform",
+        `scale(${this.transform.scale})`
+      );
+    }
+
+    this.$move.style.setProperty(
+      "transform",
+      `translate(${this.transform.x}px, ${this.transform.y}px)`
+    );
+  }
+
+  cleanup() {
+    // remove event handlers
+  }
+
+  // utilities
+
+  nudgeScale(adj: number) {
+    this.transform.scale = checkZoomBounds(
+      this.transform.scale * 1.5 ** adj,
+      this.setup.scale[0],
+      this.setup.scale[1]
+    );
+  }
+}
diff --git a/packages/lib/src/renderer/PanZoomWrapper.tsx b/packages/lib/src/renderer/PanZoomWrapper.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f3467691092310f6b5d844031a96b9900e4359e6
--- /dev/null
+++ b/packages/lib/src/renderer/PanZoomWrapper.tsx
@@ -0,0 +1,41 @@
+import React, { useRef, useState, useEffect } from "react";
+import { RendererContext } from "./RendererContext";
+import { PanZoom } from "./PanZoom";
+
+export const PanZoomWrapper = ({ children }: { children: React.ReactNode }) => {
+  const wrapper = useRef<HTMLDivElement>(null);
+  const zoom = useRef<HTMLDivElement>(null);
+  const move = useRef<HTMLDivElement>(null);
+
+  const instance = useRef(new PanZoom()).current;
+
+  useEffect(() => {
+    const $wrapper = wrapper.current;
+    const $zoom = zoom.current;
+    const $move = move.current;
+
+    if ($wrapper && $zoom && $move) {
+      instance.initialize($wrapper, $zoom, $move);
+    }
+
+    return () => {
+      instance.cleanup();
+    };
+  }, []);
+
+  return (
+    <RendererContext.Provider value={instance}>
+      <div
+        ref={wrapper}
+        className="board-wrapper"
+        style={{ touchAction: "none" }}
+      >
+        <div ref={zoom} className="board-zoom">
+          <div ref={move} className="board-move">
+            {children}
+          </div>
+        </div>
+      </div>
+    </RendererContext.Provider>
+  );
+};
diff --git a/packages/lib/src/renderer/README.md b/packages/lib/src/renderer/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..42ceaed71e18cf7a2ca09d1b20adf3c566795d42
--- /dev/null
+++ b/packages/lib/src/renderer/README.md
@@ -0,0 +1,10 @@
+This is a merge of two projects
+
+- https://github.com/BetterTyped/react-zoom-pan-pinch
+- https://github.com/pxlsspace/Pxls
+
+react-zoom-pan-pinch handles most cases, but doesn't support css `zoom` property, which Pxls found out(?) that on some browsers, css `zoom` can be used to make canvas elements not blurry on some browsers
+
+react-zoom-pan-pinch would've required a lot of modifications to how it calculates touch points as css `zoom` changes coordinates returned by events
+
+Both projects are MIT licensed
diff --git a/packages/lib/src/renderer/RendererContext.tsx b/packages/lib/src/renderer/RendererContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..284bbea7ae4dd51c72b99592ba0e9d8d1295807c
--- /dev/null
+++ b/packages/lib/src/renderer/RendererContext.tsx
@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { PanZoom } from "./PanZoom";
+
+export const RendererContext = createContext<PanZoom>(null as any);
diff --git a/packages/lib/src/renderer/index.ts b/packages/lib/src/renderer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..640916cdcaac49ce9a68a75043461e0ea6f34f7e
--- /dev/null
+++ b/packages/lib/src/renderer/index.ts
@@ -0,0 +1 @@
+export { PanZoomWrapper } from "./PanZoomWrapper";
diff --git a/packages/lib/src/renderer/lib/panning.utils.ts b/packages/lib/src/renderer/lib/panning.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9430bc92bdc410ad1fbbe8f881835ec7f9217fca
--- /dev/null
+++ b/packages/lib/src/renderer/lib/panning.utils.ts
@@ -0,0 +1,60 @@
+import { PanZoom } from "../PanZoom";
+
+export class Panning {
+  private instance: PanZoom;
+
+  public enabled: boolean = false;
+  public x: number = 0;
+  public y: number = 0;
+
+  constructor(instance: PanZoom) {
+    this.instance = instance;
+  }
+
+  /**
+   * trigger panning start
+   * @param x clientX
+   * @param y clientY
+   */
+  public start(x: number, y: number) {
+    this.enabled = true;
+    this.x = x;
+    this.y = y;
+  }
+
+  /**
+   * handle moving
+   * @param x clientX
+   * @param y clientY
+   */
+  public move(x: number, y: number) {
+    const deltaX = (x - this.x) / this.instance.transform.scale;
+    const deltaY = (y - this.y) / this.instance.transform.scale;
+    const newX = this.instance.transform.x + deltaX;
+    const newY = this.instance.transform.y + deltaY;
+
+    this.instance.$move.style.setProperty(
+      "transform",
+      `translate(${newX}px, ${newY}px)`
+    );
+  }
+
+  /**
+   * save the final change
+   * @param x clientX
+   * @param y clientY
+   */
+  public end(x: number, y: number) {
+    this.enabled = false;
+
+    const deltaX = (x - this.x) / this.instance.transform.scale;
+    const deltaY = (y - this.y) / this.instance.transform.scale;
+    const newX = this.instance.transform.x + deltaX;
+    const newY = this.instance.transform.y + deltaY;
+
+    this.instance.transform.x = newX;
+    this.instance.transform.y = newY;
+
+    this.instance.update();
+  }
+}
diff --git a/packages/lib/src/renderer/lib/pinch.utils.ts b/packages/lib/src/renderer/lib/pinch.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4a8b0f1dc6dd1b382b3dfb588aeaa85f90097aed
--- /dev/null
+++ b/packages/lib/src/renderer/lib/pinch.utils.ts
@@ -0,0 +1,61 @@
+import { PanZoom } from "../PanZoom";
+import { checkZoomBounds } from "./zoom.utils";
+
+export const getTouchDistance = (event: TouchEvent): number => {
+  return Math.sqrt(
+    (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
+      (event.touches[0].pageY - event.touches[1].pageY) ** 2
+  );
+};
+
+export const roundNumber = (num: number, decimal: number) => {
+  return Number(num.toFixed(decimal));
+};
+
+export const calculatePinchZoom = (
+  contextInstance: PanZoom,
+  currentDistance: number
+): number => {
+  const { touch, setup } = contextInstance;
+  const { scale } = setup;
+  // const { maxScale, minScale, zoomAnimation, disablePadding } = setup;
+  // const { size, disabled } = zoomAnimation;
+
+  const [minScale, maxScale] = scale;
+
+  if (
+    !touch.pinchStartScale ||
+    touch.pinchStartDistance === null ||
+    !currentDistance
+  ) {
+    throw new Error("Pinch touches distance was not provided");
+  }
+
+  if (currentDistance < 0) {
+    return contextInstance.transform.scale;
+  }
+
+  const touchProportion = currentDistance / touch.pinchStartDistance;
+  const scaleDifference = touchProportion * touch.pinchStartScale;
+
+  return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale);
+};
+
+export const calculateTouchMidPoint = (
+  instance: PanZoom,
+  event: TouchEvent,
+  scale: number,
+  contentComponent: HTMLElement
+): { x: number; y: number } => {
+  const contentRect = contentComponent.getBoundingClientRect();
+  const { touches } = event;
+  const firstPointX = roundNumber(touches[0].clientX - contentRect.left, 5);
+  const firstPointY = roundNumber(touches[0].clientY - contentRect.top, 5);
+  const secondPointX = roundNumber(touches[1].clientX - contentRect.left, 5);
+  const secondPointY = roundNumber(touches[1].clientY - contentRect.top, 5);
+
+  return {
+    x: (firstPointX + secondPointX) / 2,
+    y: (firstPointY + secondPointY) / 2,
+  };
+};
diff --git a/packages/lib/src/renderer/lib/zoom.utils.ts b/packages/lib/src/renderer/lib/zoom.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d2752a1898b041b7e8e27bba05fa4a2983b83d5
--- /dev/null
+++ b/packages/lib/src/renderer/lib/zoom.utils.ts
@@ -0,0 +1,49 @@
+import { PanZoom } from "../PanZoom";
+
+export function handleCalculateZoomPositions(
+  contextInstance: PanZoom,
+  mouseX: number,
+  mouseY: number,
+  newScale: number
+): { x: number; y: number } {
+  const { scale, x, y } = contextInstance.transform;
+
+  const scaleDifference = newScale - scale;
+
+  if (typeof mouseX !== "number" || typeof mouseY !== "number") {
+    console.error("Mouse X and Y position were not provided!");
+    return { x, y };
+  }
+
+  const calculatedPositionX = x - mouseX * scaleDifference;
+  const calculatedPositionY = y - mouseY * scaleDifference;
+  contextInstance.debug(calculatedPositionX, calculatedPositionY, "zoom");
+
+  // do not limit to bounds when there is padding animation,
+  // it causes animation strange behaviour
+
+  // const newPositions = getMouseBoundedPosition(
+  //   calculatedPositionX,
+  //   calculatedPositionY,
+  //   bounds,
+  //   limitToBounds,
+  //   0,
+  //   0,
+  //   null,
+  // );
+
+  return {
+    x: calculatedPositionX,
+    y: calculatedPositionY,
+  };
+}
+
+export function checkZoomBounds(
+  zoom: number,
+  minScale: number,
+  maxScale: number
+): number {
+  if (!Number.isNaN(maxScale) && zoom >= maxScale) return maxScale;
+  if (!Number.isNaN(minScale) && zoom <= minScale) return minScale;
+  return zoom;
+}