On
the left side of video is JS code. simple index.html with JS SpinePlayer. On the right side it react APP.
i want the behavior be like in react app.
Nothing from viewport is working. This is my left size index.html
#spine-container {
width: 250px;
height: 250px;
position: fixed;
bottom: 0;
right: 0;
z-index: 9999;
cursor: pointer;
box-sizing: border-box;
}
<main class="relative">
<section className="fixed -bottom-4 -right-4 z-10">
<div id="spine-container"> </div>
</section>
</main>
new spine.SpinePlayer("spine-container", {
jsonUrl: "spider.json",
atlasUrl: "spider.atlas",
rawDataURIs: {
"spider.json":data:application/json;base64,${jsonBase64},
"spider.atlas":data:application/octet-stream;base64,${atlasBase64},
"spider.png":data:image/png;base64,${pngBase64}`
},
preserveDrawingBuffer: false,
showControls: false,
showLoading: false,
backgroundColor: "#00000000",
fullScreenBackgroundColor: '#00000000',
alpha: true,
scale: 1,
viewport: {
width: 250,
height: 250,
padLeft: "0%",
padRight: "0%",
padTop: "0%",
padBottom: "0%",
debugRender: true,
fitToCanvas: true,

                },
                debugRender: true,// Optional: Show the viewport bounds for debugging
                animation: "idle",
                success: () => console.log("Spine animation loaded!"),
                error: (err) => console.error("SpinePlayer Error:", err)
            });

and this is my react component that behavs as i want without any resizing
import { useEffect, useRef, useState } from "react";
import "@esotericsoftware/spine-player/dist/spine-player.css";
import { SpinePlayer } from "@esotericsoftware/spine-player";

type Props = {
animation: string;
onSpineClick?: () => void;
};

export function SpineViewer(props: Props) {
const containerRef = useRef<HTMLDivElement | null>(null);
const playerRef = useRef<SpinePlayer | null>(null);
const [isReady, setIsReady] = useState(false);

useEffect(() => {
if (!containerRef.current || playerRef.current) return;

playerRef.current = new SpinePlayer(containerRef.current, {
  jsonUrl: "/spider/Spider-ready-psd.json",
  atlasUrl: "/spider/spider.atlas",
  animation: props.animation,
  alpha: true,
  backgroundColor: "#00000000",
  showControls: false,
  // backgroundColor: "#cccccc",
  // viewport: {
  //   debugRender: true,
  // },
  success: () => {
    console.log("Spine player loaded successfully.");
    setIsReady(true);
  },
});

return () => {
  playerRef.current?.dispose();
  playerRef.current = null;
  setIsReady(false);
};

}, []);

// Change animation only when ready
useEffect(() => {
if (isReady && playerRef.current) {
playerRef.current.setAnimation(props.animation, true);
}
}, [props.animation, isReady]);

return (
<div
onClick={props.onSpineClick}
ref={containerRef}
style={{
width: "150px",
height: "150px",
zIndex: 10,
cursor: "pointer", // Optional visual cue
visibility: isReady ? "visible" : "hidden", // hide until ready
}}
/>
);
}

`