This demo shows how to manually step a clip forwards and backwards.

var sceneId = 'a7139843-55e7-4d2e-ba3c-1ea23924c651';
var api = claraplayer('player');

api.sceneIO.fetchAndUse(sceneId);
api.on('loaded', function() {
  var forward = document.getElementById('forward');
  var backward = document.getElementById('backward');
  forward.onmousedown = onMouseDown('forward');
  forward.onmouseup = forward.onmouseout = api.animation.stopPlaying;
  backward.onmousedown = onMouseDown('backward');
  backward.onmouseup = backward.onmouseout = api.animation.stopPlaying;
  backward.setAttribute('disabled', true);
  var clip = api.animation.getClips()[0];
  var playSpeed = 1;

  function onEnd() {
    (playSpeed === 1 ? forward : backward).setAttribute('disabled', true);
  }

  function onMouseDown(direction){
    return function() {
      playSpeed = direction === 'forward' ? 1 : -1;
      var anim = api.animation.findAnimation(clip.name);
      var time = api.animation.getTime();
      forward.removeAttribute('disabled');
      backward.removeAttribute('disabled');

      if (anim) {
        if (anim.playSpeed !== playSpeed) {
          // If we just reversed the playSpeed of the animation, it would reverse direction, but the position
          // of the animation would be the same percentage through the animation, but from the opposite direction.
          // Therefore, we need to adjust the start time of the animation to be the inverse of the percentage
          // played, so the animation reverses from the exact same spot.
          var pctComplete = (time - anim.start) / anim.duration
          var start = time - anim.duration * (1 - pctComplete);
          api.animation.updateAnimationAttrs(clip.name, { playSpeed: playSpeed, start: start });
        }
      } else {
        api.animation.queueClip(clip.id, { playSpeed: playSpeed, onEnd: onEnd });
      }
      api.animation.startPlaying();
    }
  }
  document.getElementById('baseScene').setAttribute('href', 'https://clara.io/view/' + sceneId);
});