[Spine JS Player] Loading and playing spine for website homepage

warmanw

Hey just updated my website header to load and play spine exports directly.

I am posting it here so maybe I miss something or maybe I can improve somehow for example I dont like the borders from the sides can't hide them 😃 (not a programmer just using wix so all I have is embedding html)
https://www.armanimation.com/

<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.css">

<div id="player-container" style="width: 100%; height: 100vh; margin: 0; border-style: 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: false,
	showControls: false,
	alpha: true,
	backgroundColor: "#2d2d2d00",
	fullScreenBackgroundColor: "#2d2d2d00",
	viewport: {
    x: -2000,
    y: 800,
    width: 4000,
    height: 4000,
    padLeft: "0%",
    padRight: "0%",
    padTop: "0%",
    padBottom: "0%",
	//debugRender: true
 }
});
</script>

warmanw

p.s. wait until spine loads
p.s. hidden on mobile

Nate

You can use spine-player.min.js and spine-player.min.css for smaller file sizes. Don't use alpha: true unless you need it. Use PMA unless you have a reason not to. padLeft: 0 should work just as well, same for other pad properties.

I don't know what is going on with the border. The right way to remove a border is border: none! important;, not border-style. If you mean this color difference on the left:

Loading Image

Then I don't know what that is. Looks like it's in your skeleton.

Do you hide on mobile because of performance? Not using alpha should help. Can also try to draw fewer fullscreen images. I am guessing you layer multiple fullscreen images and the weird border comes from those.

warmanw

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>

Nate

It plays your animations. If you want it to fade in you could put that in your animations.

I don't see a black flash. I'm using Firefox. If you're using Chrome then I suppose you deserve a black flash, if not worse.

warmanw

I don't see a black flash. I'm using Firefox
Wow firefox really loads faster and without flashes, it also reloads faster

It plays your animations. If you want it to fade in you could put that in your animations.
Make sense if you are programmer and can switch from entering animation to idle then end animation
in my case I just want to use it as a loop to showcase an animation that shows with fade in initially. But nevermind I was looking for something existing that I missed, and not creating more work for you.

Nate

Check this thread where I just posted how to control player animations:
https://esotericsoftware.com/forum/d/25283-spine-player-animation-loop