<ul>
  <li><button id="play-1"><code>play()</code> scene1</button></li>
  <li><button id="pause-1"><code>pause()</code> scene1</button></li>
  <li><button id="resume-1"><code>resume()</code> scene1</button></li>
</ul>
<ul>
  <li><button id="play-2"><code>play()</code> scene2</button></li>
  <li><button id="pause-2"><code>pause()</code> scene2</button></li>
  <li><button id="resume-2"><code>resume()</code> scene2</button></li>
</ul>
<div class="tweenable" id="tweenable-1">1</div>
<div class="tweenable" id="tweenable-2">2</div>
<div class="tweenable" id="tweenable-3">3</div>
<div class="tweenable" id="tweenable-4">4</div>

body
  background: #333
  font-family: helvetica

.tweenable 
  height: 100px
  width: 100px
  border-radius: 50%
  font-size: 4em
  text-align: center
  line-height: 1.5em
  
#tweenable-1
  background: #ff8
    
#tweenable-2
  background: #f8f
    
#tweenable-3
  background: #8ff
    
#tweenable-4
  background: #888

const { Scene, Tweenable } = shifty;

const divs = [...document.querySelectorAll(".tweenable")];
const tween = i =>
  new Tweenable(
    { x: 0 },
    {
      to: { x: 400 },
      easing: "easeInOutQuad",
      duration: 1500,
      step: ({ x }) => {
        divs[i].style.transform = `translateX(${x}px)`;
      }
    }
  );

const scene1 = new Scene(tween(0), tween(1));
const scene2 = new Scene(tween(2), tween(3));

scene1.play();
Promise.all(scene1.promises).then(() => scene2.play());

[scene1, scene2].forEach((scene, i) => {
  document
    .querySelector(`#play-${i + 1}`)
    .addEventListener("click", () => scene.play());
  document
    .querySelector(`#pause-${i + 1}`)
    .addEventListener("click", () => scene.pause());
  document
    .querySelector(`#resume-${i + 1}`)
    .addEventListener("click", () => scene.resume());
});