index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>mo · js player</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
  </head>
  <body>
    <style>
      :root {
        /*font-size: 16px;*/
        line-height: 1.7;
      }

      body {
        background-color: #333;
      }
      .el {
        width: 100px;
        height: 100px;
        background: cyan;
      }
    </style>

    <div class="el" id="js-el"></div>

    <br />
    <br />
    <br />
    <br />
    <br />

    <script src="node_modules/@mojs/core/build/mo.js"></script>
    <script src="build/mojs-player.js"></script>

    <script>
      var el = document.querySelector( '#js-el' );
      var tw = new mojs.Tween({
        duration: 4000,
        onUpdate (p) {
          // console.log(p);
          el.style.transform = `translateX(${ 1000 * p }px) translateZ(0)`;
        }
      });

      // var tm = new mojs.Timeline;
      // tm.add(tw);

      var mojsPlayer = new MojsPlayer({
        add:          tw,
        isPlaying:    true,
        // progress:     .5,
        speed:        1,
        // precision: .5,
        name:         'player1'
        // className: 'lalal'
        // isSaveState: false
      });
    </script>

  </body>
</html>