horizontal and vertical smooth scroll snap

Hi I’m just wondering if I can get horizontal smooth scroll snap in somewhere between the vertical scroll snap.

this one is what i’m with so far – https://codepen.io/tarunpatnayak/pen/rNYvvQb

and I’m trying to include something like this in between the vertical scroll – https://codepen.io/tarunpatnayak/pen/OJOQXwp

can someone please help me achieving this?

Thanks In advance

<section class="panel red">
  <p>This is page 1</p>
</section>
<section class="panel green">
  <p>This is page 2</p>
</section>
<section class="panel blue">
  <p>This is page 3</p>
</section>
<section class="panel orange">
  <p>This is page 4</p>
</section>
<section class="panel red">
  <p>This is page 5</p>
</section>
<section class="panel green">
  <p>This is page 6</p>
</section>
<section class="panel blue">
  <p>This is page 7</p>
</section>
<section class="panel orange">
  <p>This is page 8</p>
</section>


<style>
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel p {
  font-size: 6vw;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.orange {
  background: orange;
}


</style>

<script>
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(ScrollToPlugin);

let sections = gsap.utils.toArray(".panel");

function goToSection(i) {
  gsap.to(window, {
    scrollTo: { y: i * innerHeight, autoKill: false, ease: "Power3.easeInOut" },
    duration: 0.85
  });
}

ScrollTrigger.defaults({
  // markers: true
});

sections.forEach((eachPanel, i) => {
  // const mainAnim = gsap.timeline({ paused: true });

  ScrollTrigger.create({
    trigger: eachPanel,
    onEnter: () => goToSection(i)
  });

  ScrollTrigger.create({
    trigger: eachPanel,
    start: "bottom bottom",
    onEnterBack: () => goToSection(i)
  });
});


</script>