Generated table of contents - Component

<!-- MARKUP TAKEN FROM GENERATED OUTPUT -->
<div class="toc">
  <div class="toc__content">
    <h2 class="toc__header">In this article</h2>
    <ul class="toc__list">
      <li>
        <a href="#what-are-animations">What are animations?</a>
        <ul class="toc__list">
          <li><a href="#hodo-animations-work">How do animations work?</a></li>
        </ul>
      </li>
      <li>
        <a href="#what-are-animation-frames">What are animation frames?</a>
      </li>
      <li>
        <a href="#what-impacts-animation-frames"
          >What impacts animation frames?</a
        >
      </li>
      <li>
        <a href="#animation-frames:-updates-that-matter"
          >Animation frames: Updates that matter</a
        >
        <ul class="toc__list">
          <li>
            <a href="#main-and-compositor-thread-updates"
              >Main and compositor thread updates</a
            >
          </li>
          <li><a href="#missing-paint-updates" class="scroll-spy__active">Missing paint updates</a></li>
          <li><a href="#detecting-animations">Detecting animations</a></li>
          <li>
            <a href="#quality-versus-quantity">Quality versus quantity</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#states-of-a-single-animation-frame"
          >States of a single animation frame</a
        >
      </li>
      <li>
        <a href="#putting-it-all-together:-a-percent-dropped-frames-metric"
          >Putting it all together: A Percent Dropped Frames metric</a
        >
      </li>
      <li>
        <a href="#try-it-yourself-in-developer-tooling!"
          >Try it yourself in developer tooling!</a
        >
        <ul class="toc__list">
          <li><a href="#performance-hud">Performance HUD</a></li>
          <li><a href="#frame-rendering-stats">Frame Rendering Stats</a></li>
          <li>
            <a href="#frame-viewer-in-devtools-performance-profile-recordings"
              >Frame Viewer in DevTools performance profile recordings</a
            >
          </li>
          <li><a href="#chrome-tracing">Chrome tracing</a></li>
        </ul>
      </li>
      <li><a href="#what's-next">What's next</a></li>
      <li><a href="#feedback">Feedback</a></li>
    </ul>
    <!---->
  </div>
</div>

<!-- MARKUP TAKEN FROM GENERATED OUTPUT -->
<div class="toc">
  <div class="toc__content">
    <h2 class="toc__header">In this article</h2>
    <ul class="toc__list">
      <li>
        <a href="#what-are-animations">What are animations?</a>
        <ul class="toc__list">
          <li><a href="#hodo-animations-work">How do animations work?</a></li>
        </ul>
      </li>
      <li>
        <a href="#what-are-animation-frames">What are animation frames?</a>
      </li>
      <li>
        <a href="#what-impacts-animation-frames"
          >What impacts animation frames?</a
        >
      </li>
      <li>
        <a href="#animation-frames:-updates-that-matter"
          >Animation frames: Updates that matter</a
        >
        <ul class="toc__list">
          <li>
            <a href="#main-and-compositor-thread-updates"
              >Main and compositor thread updates</a
            >
          </li>
          <li>
            <a href="#missing-paint-updates" class="scroll-spy__active"
              >Missing paint updates</a
            >
          </li>
          <li><a href="#detecting-animations">Detecting animations</a></li>
          <li>
            <a href="#quality-versus-quantity">Quality versus quantity</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#states-of-a-single-animation-frame"
          >States of a single animation frame</a
        >
      </li>
      <li>
        <a href="#putting-it-all-together:-a-percent-dropped-frames-metric"
          >Putting it all together: A Percent Dropped Frames metric</a
        >
      </li>
      <li>
        <a href="#try-it-yourself-in-developer-tooling!"
          >Try it yourself in developer tooling!</a
        >
        <ul class="toc__list">
          <li><a href="#performance-hud">Performance HUD</a></li>
          <li><a href="#frame-rendering-stats">Frame Rendering Stats</a></li>
          <li>
            <a href="#frame-viewer-in-devtools-performance-profile-recordings"
              >Frame Viewer in DevTools performance profile recordings</a
            >
          </li>
          <li><a href="#chrome-tracing">Chrome tracing</a></li>
        </ul>
      </li>
      <li><a href="#what's-next">What's next</a></li>
      <li><a href="#feedback">Feedback</a></li>
    </ul>
    <!---->
  </div>
</div>