FadeInLeft effect when changing content

      window.addEventListener('scroll', () => {
    let scrollDistance = window.scrollY;

    if (window.innerWidth > 768) {
        document.querySelectorAll('.section1').forEach((el, i) => {
            if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
                document.querySelectorAll('.nav a').forEach((el) => {
                    if (el.classList.contains('active')) {
                        el.classList.remove('active');
                    }
                });

                document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
            }
        });
    }
});
body {
  background: gray;
  padding: 100px;
}

.block-2 {
  display: flex;
  flex-direction: row;
  background: white;
  width: 100%;
  padding: 50px;
  height: auto;
}

.section-left {
  position: sticky;
  top: 10px;
  height: 300px;
  /* background: gray; */
  width: 100%;
}

.section-right {
  background: blue;
  width: 100%;
}

.wrap {
  margin: 10px;
  background: red;
}

.content {
  height: 500px;
}

.footer {
  width: 100%;
  height: 700px;
  background: red;
}

.nav {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background-color: white;
  /*     padding: 20px;
*/
}

.nav ul {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0;
}

.nav a {
  display: flex !important;
  text-decoration: none;
  color: black !important;
  display: inline-block;
  /*     margin-right: 25px !important;
 */
}

@media screen and (max-width: 1024px) {}

.subtitle {

  opacity: 0;

}



.active {

  opacity: 1;

}

.content1 {
  position: absolute;
  background-color: red;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content2 {
  position: absolute;
  background-color: gray;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content3 {
  position: absolute;
  background-color: green;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content4 {
  position: absolute;
  background-color: blue;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}
<body>


  <div class="block-2">
    <div class="section-left">
      <nav class="nav">
        <ul>

          <li><a href="" class="active subtitle">
              <div class="content1">
                <h1>O1</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content2">
                <h1>O2</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content3">
                <h1>O3</h1>
              </div>
            </a></li>

          <li><a href="" class="subtitle">
              <div class="content4">
                <h1>O4</h1>
              </div>
            </a></li>



        </ul>
      </nav>
    </div>
    <div class="section-right">
      <div class="section1 wrap">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1 ">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</body>

How can I get the FadeInLeft effect when changing content from .opacity=0 to .opasity=1 in the left side.
I tried to solve this problem with the given script, but it did not work for me.
I am not a cool js expert and I will be glad for your help.
P.S. See this layout in fullscreen.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Thanks