From 034c6266e810e3564ba1a96760acb36bb8a87c1f Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Thu, 29 Aug 2024 14:51:34 +0200
Subject: [PATCH] Translate is done each frame through requestAnimationFrame.

---
 spine-ts/spine-webgl/src/SpineWebComponentWidget.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
index cab04fa58..54d59af76 100644
--- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
+++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
@@ -637,6 +637,8 @@ class SpineWebComponentOverlay extends HTMLElement {
 
         this.updateCanvasSize();
         this.zoomHandler();
+
+        // translateCanvas starts a requestAnimationFrame loop
         this.translateCanvas();
 
 		this.overflowLeftSize = this.overflowLeft * document.documentElement.clientWidth;
@@ -955,14 +957,17 @@ class SpineWebComponentOverlay extends HTMLElement {
         }
 	}
 
+    // right now, we scroll the canvas each frame, that makes scrolling on mobile waaay more smoother
+    // this is way scroll handler do nothing
     private scrollHandler = () => {
-		this.translateCanvas();
+		// this.translateCanvas();
 	}
 
     private translateCanvas() {
 		const scrollPositionX = window.scrollX - this.overflowLeftSize;
 		const scrollPositionY = window.scrollY - this.overflowTopSize;
 		this.canvas.style.transform =`translate(${scrollPositionX}px,${scrollPositionY}px)`;
+        requestAnimationFrame(() => this.translateCanvas());
 	}
 
     private zoomHandler = () => {