<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: 100px

const { tween } = shifty;

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

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

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

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

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