<div class="container">
  <div class="iframe-container">
    <iframe id="api-frame"></iframe>
  </div>
  <div class="explainer" id="explainer">
    <h3>Animations</h3>
    Play and Pause the first available animation.
  </div>  
  <div class="controls" id="controls">
    <button id="playAnimation">Play animation</button>
    <button id="pauseAnimation">Pause animation</button>
  </div>
</div>

html, body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: grayscale;
    font-family: Open Sans, sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.iframe-container {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
}

.iframe-container > iframe {
    border: 0;
    width: 100%;
    flex: 1;
}

.explainer {
    height: 130px;
    padding: 15px 15px 0 15px;
    background-color: #E2E2E2;
    overflow: auto;
}

.controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    height: 80px;
    padding: 15px 0 0 15px;
    background-color: #F2F2F2;
    
    overflow: auto;
}

.controls > * {
    margin-right: 15px;
    margin-bottom: 15px;
}



var version = '1.10.0';
var urlid = '4f645851a4b8498aba6ed663c22709a3';

function getAnimations(api) {
  return new Promise ((resolve, reject) => {
    if (api) {
      api.getAnimations((err, animations) => {
        if (err) reject(err)
        resolve(animations)
      })
    } else reject()
  })
}
function setCurrentAnimationByUID(api, UID) {
  return new Promise ((resolve, reject) => {
    if (api) {
      api.setCurrentAnimationByUID(UID, err => {
        if (err) reject(err)
        resolve()
      })
    } else reject()
  })
}
function playAnimation(api) {
  return new Promise ((resolve, reject) => {
    if (api) {
      api.play(err => {
        if (err) reject(err)
        resolve()
      })
    } else reject()
  })
}
function pauseAnimation(api) {
  return new Promise ((resolve, reject) => {
    if (api) {
      api.pause(err => {
        if (err) reject(err)
        resolve()
      })
    } else reject()
  })
}

function actionSkfb() {
  // initialize
  var iframe = document.getElementById('api-frame');
  if (!iframe) {
    console.log('no target');
  }

  if (!window.Sketchfab) {
    console.log('no Sketchfab library');
  }
  var client = new window.Sketchfab(version, iframe);

  var error = function() {
    console.error('Sketchfab API error');
  };
  
  var success = function(api) {
    api.start(function() {
      api.addEventListener('viewerready', function() {
        document.getElementById('playAnimation').addEventListener('click', function() {
          getAnimations(api)
          .then(animations => {
            console.log(animations)
            if (animations.length > 0) {
              setCurrentAnimationByUID(api, animations[0][0])
              .then(() => {
                playAnimation(api)
              })
            }
          })
        }); 
        document.getElementById('pauseAnimation').addEventListener('click', function() {
          pauseAnimation(api)
        }); 
      }); 
    }); 
  };

  client.init(urlid, {
    success: success,
    error: error,
    ui_annotations: 1, //show the annotation menu
    ui_general_controls: 0, //hide the ui controls in teh bottom right
    ui_infos: 0, //hide the model info at the top
    scrollwheel: 1,
    ui_watermark: 0
  });
}

actionSkfb();

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://static.sketchfab.com/api/sketchfab-viewer-1.9.0.js