Website Performance issues after integrating Spine Player

navin-kr

Hello Nate and everyone, I hope you're doing well. I have a question regarding the Spine player. I've implemented it on my website, but ever since then, the site has become extremely slow and unresponsive - especially on mobile devices.

Is there any way to disable interaction with the canvas so that users can still scroll the page smoothly on mobile, even after touching the canvas? Right now, I'm unable to scroll up or down because touching the canvas pauses the Spine animation. Ideally, I’d like the user to only respond to input through the controls in the bottom panel, and not pause when the canvas itself is touched.

If you’d like to see the issue in action, you can visit my website here:
https://navinkr.com/

I’d really appreciate any help you can offer. Thank you, and I look forward to your response!

Davide

navin-kr
It makes sense to disable click/touch interactions. I've created an issue for that; it should be straightforward to implement.

However, as I already mentioned to you on Discord, please take into consideration that each Spine player creates a new WebGL context. This could lead to performance issues and cause you to reach the maximum number of WebGL contexts (which is especially problematic on mobile devices).

Spinebot

To address the performance issues and interaction problems with the Spine Player on your website, you can customize the spine.Input to prevent it from using preventDefault, which is likely stopping the scroll event. This customization will allow users to scroll the page smoothly even after interacting with the canvas. You can find the relevant code in the Spine runtimes repository, specifically in the Input.ts file. Additionally, consider using a different runtime like spine-canvas or spine-webgl if you need more control over the interactions and performance, as the Spine Player is not designed for complex interactions or multiple skeletons in a single canvas.

Davide

We have released version 4.2.82, which allows you to disable click/touch interactions by setting the interactive: false option in the player configuration.

Let us know if this solution is suitable for you 🙂