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
}}
/>
);
}