Horizontal scroll not working with one scroll in GSAP scroll trigger

Question

I am using the GSAP product scroll trigger. What I am doing is, once the user scroll then I have to scroll the next section from bottom to top in the one scroll. This will happen until the sixth section comes on the viewport.

Once the sixth section comes then I have to scroll his rows horizontally. Once complete all the rows then start again reaming section from bottom to top.

I am sharing the below codepen link here. My vertical issue got resolved but I am getting the issue on rows horizontally. I mean horizontal scroll not working with one scroll and I have 5 rows but I am getting on four.

You can also check snippet here

gsap.registerPlugin(ScrollTrigger);

function goToSection(i, anim) {
  gsap.to(window, {
    scrollTo: {
      y: i * innerHeight,
      autoKill: false
    },
    duration: 1
  });

  if (anim) {
    anim.restart();
  }
}

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    onEnter: () => goToSection(i)
  });

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



let sections = gsap.utils.toArray(".rows");
gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".pinme",
    pin: true,
    scrub: 1,
    // snap: 1 / (sections.length - 1),
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".pinme").offsetWidth
  }
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Signika Negative", sans-serif, Arial;
}

.blue {
  background-color: blue
}

.red {
  background-color: #f00;
}

.orange {
  background-color: orange;
}

.purple {
  background-color: purple
}

.green {
  background-color: green
}

.gray {
  background-color: gray
}

.panel {
  height: 100vh;
  position: sticky;
  top: 0;
}

h2 {
  font-size: 50px;
  color: #fff;
  padding: 0;
  margin: 0;
}

.rows {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.pinme {
  width: 700%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.sixth {
  width: 100% !important
}

<div class="description panel blue">
  <h2>Scroll Down</h2>
</div>

<section class="panel red">
  <h2>ONE</h2>
</section>
<section class="panel orange">
  <h2>TWO</h2>
</section>
<section class="panel purple">
  <h2>THREE</h2>
</section>
<section class="panel green">
  <h2>FOUR</h2>
</section>

<section class="panel red">
  <h2>five</h2>
</section>

<section class="panel purple pinme">
  <div class="sixth">
    <h2>Six</h2>
  </div>

  <div class="rows rows1">
    <h2>Rows One</h2>
  </div>
  <div class="rows rows2">
    <h2>Rows Two</h2>
  </div>
  <div class="rows rows3">
    <h2>Rows Three</h2>
  </div>
  <div class="rows rows4">
    <h2>Rows Four</h2>
  </div>
  <div class="rows rows5">
    <h2>Rows Five</h2>
  </div>

</section>

<section class="panel blue unpinme">
  <h2>seven</h2>
</section>

<section class="panel red">
  <h2>Eight</h2>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

Horizontal scroll not working with one scroll in GSAP scroll trigger

0 Answers0