horizontal and vertical smooth scroll snap

Question

I'm just wondering if I can get a horizontal smooth scroll snap in somewhere between the vertical scroll snap?

This one is what I'm working with so far - https://codepen.io/tarunpatnayak/pen/rNYvvQb

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?

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)
  });
});

* {
  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;
}

<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>