<button id="play">Play animation</button>
<h1>&nbsp;</h1>
<div id="tweenable"/>

body
  background: #333
  font-family: helvetica
  
button
  font-size: 2em

h1
  color: #eee
  line-height: 1.2em
  
#tweenable 
  height: 100px
  width: 100px
  border-radius: 50%
  font-size: 4em
  text-align: center
  line-height: 1.5em
  background: #ff8
  transform-origin: 0 0
  position: absolute
  top: 150px

const { tween } = shifty;

const animate = async () => {
  const element = document.querySelector("#tweenable");
  const text = document.querySelector("h1");

  text.innerText = "One";
  const { tweenable } = await tween({
    render: ({ x }) => {
      element.style.transform = `translateX(${x}px)`;
    },
    easing: "easeInOutQuad",
    duration: 300,
    from: { x: 0 },
    to: { x: 200 }
  });

  text.innerText = "Two";
  await tweenable.tween({
    to: { x: 0 }
  });

  text.innerText = "Three!";
  await tweenable.tween({
    to: { x: 200 }
  });

  text.innerText += " 😃";
};

document.querySelector("#play").addEventListener("click", animate);