docs/onUpdate.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script>
      window.addEventListener("DOMContentLoaded", () => {
        const params = { radian: 0 };

        gsap.to(params, {
          radian: Math.PI * 2,
          duration: 2,
          ease: "power4.inOut",
          onUpdate: () => {
            const { radian } = params;
            const x = Math.cos(radian) * 100;
            const y = Math.sin(radian) * 100;
            gsap.set(".circle", { x, y });
          },
          repeat: -1,
        });
      });
    </script>
    <style>
      html {
        height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
        background: #000;
        height: 100%;
        display: grid;
        place-items: center;
      }
      .container {
      }
      .circle {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        display: block;
        background: white;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="circle"></div>
    </div>
  </body>
</html>