<div id="lottie"></div>
<button id="start-button">START</button>
<div id="input-container">
<input type="range" id="speed" name="speed"
         min="0.1" max="2" value="1" step="0.1">
<label id="speed-label" for="speed">Playback Speed</label>
  </div>
<div id="volume-container">
<input type="range" id="volume" name="volume"
         min="0" max="1" value="0.5" step="0.1">
<label id="volume-label" for="volume">Volume</label>
  </div>
body,
html {
  background-color: #ffg;
  margin: 0px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#lottie {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  /*display:none;*/
}

#start-button {
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 50px;
  margin: auto;
  border-radius: 5px;
  border: 1px solid white;
  color: white;
  cursor: pointer;
  display: none;
}

#start-button:hover {
  background-color: #444;
}

#input-container, #volume-container {
  position: absolute;
  bottom: 0;
  margin: auto;
  width: 250px;
  display: flex;
}

#input-container {
  left: 10px;
}

#volume-container {
  right: 10px;
  width: 200px;
}

#speed, #volume {
  margin-right: 8px;
}

#speed-label, #volume-label {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
var anim;
var elem = document.getElementById("lottie");
var startButton = document.getElementById("start-button");
var speed = document.getElementById("speed");
var volume = document.getElementById("volume");
var animData = {
  container: elem,
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "https://labs.nearpod.com/bodymovin/demo/mixstories/data.json"
};
anim = lottie.loadAnimation(animData);

anim.addEventListener("complete", function (error) {
  startButton.style.display = "block";
  anim.goToAndStop(0);
});

anim.addEventListener("DOMLoaded", function (error) {
  startButton.style.display = "block";
  anim.setVolume(0.5);
  addListeners();
});

function togglePlay() {
  if (anim.isPaused) {
    startButton.style.display = "none";
    anim.play();
  } else {
    anim.pause();
    startButton.style.display = "block";
  }
}

function updateSpeed(ev) {
  anim.setSpeed(ev.target.value);
}
function updateVolume(ev) {
  anim.setVolume(ev.target.value);
}

function addListeners() {
  speed.addEventListener("change", updateSpeed);
  speed.addEventListener("input", updateSpeed);
  volume.addEventListener("change", updateVolume);
  volume.addEventListener("input", updateVolume);
  elem.addEventListener("click", togglePlay);
  startButton.addEventListener("click", togglePlay);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js
  2. https://labs.nearpod.com/bodymovin/demo/mixstories/lottie.min.js