Translate is done each frame through requestAnimationFrame.

This commit is contained in:
Davide Tantillo 2024-08-29 14:51:34 +02:00
parent 6c0b1b8c2c
commit 034c6266e8

View File

@ -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 = () => {