Get started with spinejs CDN

MIT licensed

SpineJS is a JS MVC framework for building dynamic, data-driven web applications.

Tags:
  • mvc
  • models
  • controllers
  • events
  • routing
  • popular
  • orm

Stable version

Copied!

How to start using spinejs CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with spinejs CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/spinejs/1.2.0/all.min.js"></script>
  <style>
    #skeleton {
      width: 0;
      height: 0;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="image" src="character.png" alt="Character">
    <div id="skeleton"></div>
  </div>

  <script>
    const image = document.getElementById('image');
    const skeleton = document.getElementById('skeleton');

    Spine.ImageLoader.load('character.atlas', (result) => {
      const spine = new Spine.Armature('character', result);
      spine.setMix('character', 'idle');
      spine.setSkeletonData(result.skeletonData);
      spine.attach(image);
      spine.update(0.016); // update animation every frame (60 FPS)

      document.getElementById('container').appendChild(spine.element.domElement);

      function animate() {
        requestAnimationFrame(animate);
        spine.update(0.016);
      }

      animate();
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions