Always happy to see you respond my posts!
I don't know what is going on with the border.
What you see behind is the initial static image, so I actually fail to stretch fully that embed html element(nothing to do with the player of course 😃)
Do you hide on mobile because of performance?
I will fix it on mobile later, now its broken. need to make it responsive.
Can player fadein nicely, instead of snapping into place?
Before even skeleton loads I see black background flashes quickly before loading starts. Any clue how to fix that?
current code
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.min.css">
<div id="player-container" style="width: 100%; height: 100vh; margin: 0; border: none!important; overflow: hidden;"></div>
<style>
body {
overflow: hidden; /* Hide scrollbars */
display: block";
}
</style>
<script>
new spine.SpinePlayer("player-container", {
jsonUrl: "https://warmanw.com/spine/lunar-beast-annie-alistar.json",
atlasUrl: "https://warmanw.com/spine/lunar-beast-annie-alistar.atlas",
animation: "combined",
premultipliedAlpha: true,
showControls: false,
alpha: false,
backgroundColor: "#2d2d2dff",
fullScreenBackgroundColor: "#2d2d2dff",
viewport: {
x: -2000,
y: 800,
width: 4000,
height: 4000,
padLeft: "0%",
padRight: "0%",
padTop: "0%",
padBottom: "0%",
//debugRender: true
}
});
</script>