demo-dotlottie/demo-02-trigger-animations.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lottie Demo</title>
    <link rel="stylesheet" href="src/css/style.css" />
  </head>
  <body>
    <nav class="site-nav">
      <ul>
        <li><a class="button" href="demo-01-simple-playback.html">simple playback</a></li>
        <li><a class="button" href="demo-02-trigger-animations.html">trigger animations</a></li>
        <li><a class="button" href="demo-03-scrolltrigger.html">scrolltrigger</a></li>
      </ul>
    </nav>
    <article class="paper">
      <h2 class="h2">Trigger Animations</h2>
      <canvas id="anim" style="width: 25rem; height: 25rem;"></canvas>
      <div>
        <button data-marker="box">Play Box Animation</button>
        <button data-marker="ball">Play Ball Animation</button>
        <button data-marker="hexa">Play Hexa Animation</button>
      </div>
    </article>
    <script type="module" src="/src/demo-02-trigger-animations.js"></script>
  </body>
</html>