Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка не работает с одной прокруткой в триггере прокрутки GSAP

Горизонтальная прокрутка не работает с одной прокруткой в триггере прокрутки GSAP

#html #jquery #css #gsap #scrolltrigger

#HTML #jquery #css #gsap #scrolltrigger

Вопрос:

Я использую триггер прокрутки продукта GSAP. Что я делаю, так это то, что после прокрутки пользователем мне нужно прокрутить следующий раздел снизу вверх в одном свитке. Это будет происходить до тех пор, пока в окне просмотра не появится шестой раздел.

Как только появится шестой раздел, я должен прокрутить его строки по горизонтали. После завершения всех строк снова начните развертывать раздел снизу вверх.

Я делюсь приведенной ниже ссылкой на codepen здесь. Моя вертикальная проблема была решена, но я получаю проблему в строках по горизонтали. Я имею в виду, что горизонтальная прокрутка не работает с одной прокруткой, и у меня есть 5 строк, но я получаю четыре.

Вы также можете проверить фрагмент здесь

 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>