Pin section and change tabs on vertical scroll with GSAP or just javascript

Question

Can you help me with this - when I reach What We Do section I need to pin it and scroll through the four tabs on left (and add class to each one) and then unpin and go to Latest Insights section.

Thanks a lot!

SCREENSHOT

<div class="row other other-1">
  <p>Section 1</p>
</div>

<div class="row important">
  <p style="text-align: center; max-width: 100%;">Section 2</p>
  <div class="flex">
    <nav>
      <ul>
        <li class="selected"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </nav>
    <main>
      <div class="content content-1">
        <h1>Title for Tab 1</h1>
        <p>Lorem ipsum dolor sit amet,</p>
      </div>
      <div class="content content-2">
        <h1>Title for Tab 2</h1>
        <p>Lorem ipsum dolor sit amet,</p>
      </div>
      <div class="content content-3">
        <h1>Title for Tab 3</h1>
        <p>Lorem ipsum dolor sit amet,</p>
      </div>
      <div class="content content-4">
        <h1>Title for Tab 4</h1>
        <p>Lorem ipsum dolor sit amet,</p>
      </div>
    </main>
  </div>
</div>

<div class="row other other-2">
  <p>Section 3</p>
</div>

Codepen