How to use the @mathigon/boost.animate function in @mathigon/boost

$play.on('play', async () => {
    await animate((p) => {
      p = (2 * p) % 1;
      const q = Math.floor(p * 10) / 10;  // sweep start progress
      const start = Point.interpolateList(points, q);
      const end = Point.interpolateList(points, p);
      $earth.setCenter(end);
      $sweep.setAttr('d',
          `M 220 120 L ${start.x} ${start.y} A 120 105 0 0 1 ${end.x} ${end.y} Z`);
    }, 8000).promise;
    $play.reset();
    $step.score('play');
  });
}

function run() {
    if (running) return;
    running = true;
    $section.score('race');

    $lapTimes.forEach($g => { $g.forEach($l => { $l.exit('pop', 200); }); });

    animate(function(p) {
      for (let i of [0, 1]) {
        let offset = ((p * duration) % speed[i]) / speed[i];
        let point = $paths[i].getPointAt(offset);
        $runners[i].setCenter(point);
        $runners[i].setAttr('r', 12 * (1 + point.y/234));
      }
      $buttonText.text = Math.floor(p * duration * 10) + ' s';
    }, duration * 1000).then(function() {
      setTimeout(function() { running = false; $buttonText.text = 'START'; }, 1000);
    });

    for (let i of [0, 1]) {
      for (let x = 0; x < duration/speed[i]; ++x) {
        setTimeout(function() {
          $lapTimes[i][x].enter('pop', 200);
        }, speed[i] * (x+1) * 1000);

$select.on('change', ($el) => {
    const j = i;
    i = +$el.data.value;
    if (i === 3) $step.score('area-circle');
    animate((p) => {
      $path.draw(Polygon.interpolate(polygons[j], polygons[i], p));
      $step.model.area = Math.round(p * areas[i] + (1 - p) * areas[j]);
    }, 400);
  });
}

$box.one('click', () => {
    $box.removeClass('interactive');

    animate((p) => {
      if (p < 0.5) {
        $imgs[2].translate(0, p * p * 4 * 166);
      } else {
        let q = 2 * p - 1;
        $imgs[2].translate(85 * q, 166 + 310 * q * (q - 0.6));
      }
    }, 1600);

    setTimeout(() => $imgs[1].remove(), 800);
    setTimeout(() => $step.score('apple'), 1600);
  });
}

function transition(graph: Graph, to: SimplePoint[]) {
    let from = graph.vertices.map(v => ({x: v.posn.x, y: v.posn.y}));
    animate((q) => {
      graph.arrange(graph.vertices.map((v, i) => {
        return {
          x: lerp(from[i].x, to[i].x, q),
          y: lerp(from[i].y, to[i].y, q)
        };
      }));
    }, 800);
  }

end(posn) {
        const speed = Point.distance(posn, center) * 10;
        const angle = new Line(posn, center).angle;

        const ux = speed * Math.cos(angle);
        const uy = speed * Math.sin(angle);

        animate((t) => {
          t = t * 3;
          const x = posn.x + ux * t;
          const y = posn.y + uy * t + t * t * 600 / 2;
          $ball.setCenter({x, y});
        }, 3000);
      }
    });

play() {
    if (this.burst.isAnimating) return;

    animate(p => {
      const s = p < 0.3 ? 0 : ease('elastic-out', 1.43 * p - 0.43);
      this.$text.css('transform', `scale(${s})`);
    }, 1000);

    this.burst.play(1000, [80, 80], [0, 80]);
  }
}

$slideshow.on('next back', (s: number) => {
    let start = positions[slide];
    let end = positions[s];
    slide = s;

    animate((x) => {
      $vertices.forEach(
          ($v, i) => { $v.setCenter(Point.interpolate(start[i], end[i], x)); });
      $edges.forEach(($e, i) => {
        $e.setLine(Point.interpolate(start[i], end[i], x),
            Point.interpolate(start[(i + 1) % 4], end[(i + 1) % 4], x));
      });
    }, 400);
  });

function transition(graph, to) {
    let from = graph.vertices.map(v => [v.posn.x, v.posn.y]);
    animate(function(q) {
      graph.arrange(from.map(function(x, i) { return {
        x: to[i][0] * q + from[i][0] * (1-q),
        y: to[i][1] * q + from[i][1] * (1-q)
      }; }));
    }, 800);
  }

  $toggle.on('play', () => animation = animate(step));
  $toggle.on('pause', () => animation.cancel());