Как уменьшить размер scrollmagic-pin-spacer

Question

У меня есть слайдер сделанный с помощью react scrollMagic, карточки при скролле вниз прокручиваются вправо, но проблема в том, что они должны по вертикали оставаться на месте. А они прокручиваются вниз и остаются посредине большого блока scrollmagic-pin-spacer. Есть ли возможность уменьшить этот блок, чтобы карточки оставались на месте по вертикали?

Вот как это выглядит:

Вот код который у меня получился

<div className="wide-container">
                    <div className="sticky-slider" id="sticky-slider">
                      <Controller>
                        <Scene
                          triggerHook="onLeave"
                          duration="250%"
                          pin={{ pushFollowers: false }}
                          offset={-dimensions.height * 1.5}
                        >
                          <Timeline
                            wrapper={<div className="sticky-slider-cont" ref={targetRef} />}
                          >
                            <Tween
                              from={{ x: dimensions.width - dimensions.width / 5 }}
                              to={{ x: -dimensions.width * 1.5 }}
                            >
                              {state.images.map((image, index) => {
                                return (
                                  <section key={index}>
                                    <StickySlide
                                      text={'test-text'}
                                      key={index}
                                      img={image} />
                                  </section>);
                              })}
                            </Tween>
                          </Timeline>
                        </Scene>
                      </Controller>
                    </div>
                    <div className="sticky-slider-scrollbar">
                      <div className="sticky-slider-scrollbar__drag" id="sticky-slider-scrollbar__drag" />
                    </div>
                  </div>

Answer 1

Да. Это возможно, посмотрите пример в данном виде

https://codepen.io/testaccountdeltas/pen/OJEyMWe

triggerScrollInit();

$(".kill").click(function () {
  triggerScrollKill();
});

$(".start").click(function () {
  triggerScrollInit();
});

function triggerScrollKill() {
  if (window.listGsapTimeInit !== true) return;
  window.listGsapTimeline.forEach(function (nameID) {
    ScrollTrigger.getById(nameID).kill();
  });
  window.listGsapTimeInit = false;
}

function triggerScrollInit() {
  if (window.listGsapTimeInit === true) return;
  window.listGsapTimeline = [];
  window.listGsapTimeInit = true;
  $(".horizontalScroll").each(function (index) {
    let _this = $(this);
    let horizontalScrollWrapper = this.querySelector(
      ".horizontalScrollWrapper"
    );
    let horizontalScrollItems = horizontalScrollWrapper.querySelector(
      ".horizontalScrollItems"
    );
    let scrollItems = [
      ...horizontalScrollItems.querySelectorAll(".horizontalScrollItem")
    ];
    if (scrollItems.length <= 0) return;

    let x = () =>
      scrollItems[0].scrollWidth / 5 +
      (horizontalScrollItems.scrollWidth - window.innerWidth) +
      $(horizontalScrollItems).offset().left;

    let nameID = "triggerScroll" + index;
    window.listGsapTimeline.push(nameID);
    gsap.timeline().fromTo(
      scrollItems,
      {
        x: () => 0
      },
      {
        x: () => -x(),
        scrollTrigger: {
          trigger: horizontalScrollWrapper,
          start: "center center",
          pin: this,
          invalidateOnRefresh: true,
          anticipatePin: 1,
          scrub: 1,
          end: () => "+=" + x(),
          markers: true
        },
        id: nameID
      }
    );

    let body = $("html, body");
    let step = 350;
    let thisNext = $(this).find(".next");
    thisNext.click(function () {
      let scrollTop = body.scrollTop();
      let scrollTopMin = _this.offset().top;
      if (scrollTop < scrollTopMin) {
        scrollTop = scrollTopMin;
      }
      scrollTop += step;

      body.stop().animate({ scrollTop: scrollTop }, 300, "swing");
    });

    let thisPrev = $(this).find(".prev");
    thisPrev.click(function () {
      let scrollTop = body.scrollTop();
      let scrollTopMin = _this.offset().top;
      if (scrollTop > scrollTopMin) {
        scrollTop = scrollTop - step;

        body.stop().animate({ scrollTop: scrollTop }, 300, "swing");
      }
    });
  });
}

.banner,
.end {
  background: #ccc;
  width: 100%;
  height: 50vh;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
}

.marquee {
  height: auto;
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
}

.horizontalScrollWrapper {
  padding-left: 5%;
  height: 150px;
}

.horizontalScrollItems {
  height: 100%;
  top: 0;
  display: flex;
}

.horizontalScrollItem {
  width: 174px;
  height: 174px;
  display: flex;
  text-align: center;
  margin-right: 55px;
  background: blue;
  border-radius: 100%;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - horizontal Scroll items gsap</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<button class="kill">Отключить</button>
<button class="start">Включить</button>

<div class="wrapper horizontalScroll">

  <!-- ! start -->
  <section class="banner">
    Верхняя часть
  </section>
  <button class="next">Вперёд</button>
  <button class="prev">Назад</button>
  <!-- ! to animate -->
  <section class="marquee">
    <div class="horizontalScrollWrapper">
      <div class="horizontalScrollItems">
        <div class="horizontalScrollItem">1</div>
        <div class="horizontalScrollItem">2</div>
        <div class="horizontalScrollItem">3</div>
        <div class="horizontalScrollItem">4</div>
        <div class="horizontalScrollItem">5</div>
        <div class="horizontalScrollItem">6</div>
        <div class="horizontalScrollItem">7</div>
        <div class="horizontalScrollItem">8</div>
        <div class="horizontalScrollItem">9</div>
        <div class="horizontalScrollItem">10</div>
        <div class="horizontalScrollItem">11</div>
        <div class="horizontalScrollItem">12</div>
        <div class="horizontalScrollItem">13</div>
        <div class="horizontalScrollItem">14</div>
        <div class="horizontalScrollItem">15</div>
        <div class="horizontalScrollItem">16</div>
        <div class="horizontalScrollItem">17</div>
        <div class="horizontalScrollItem">18</div>
        <div class="horizontalScrollItem">19</div>
        <div class="horizontalScrollItem">20</div>
      </div>
    </div>
  </section>

  <!-- ! end -->
  <section class="end">
    Нижняя часть
  </section>

</div>

<div class="wrapper horizontalScroll">

  <!-- ! start -->
  <section class="banner">
    Верхняя часть
  </section>
  <button class="next">Вперёд</button>
  <button class="prev">Назад</button>
  <!-- ! to animate -->
  <section class="marquee">
    <div class="horizontalScrollWrapper">
      <div class="horizontalScrollItems">
        <div class="horizontalScrollItem">1</div>
        <div class="horizontalScrollItem">2</div>
        <div class="horizontalScrollItem">3</div>
        <div class="horizontalScrollItem">4</div>
        <div class="horizontalScrollItem">5</div>
        <div class="horizontalScrollItem">6</div>
        <div class="horizontalScrollItem">7</div>
        <div class="horizontalScrollItem">8</div>
        <div class="horizontalScrollItem">9</div>
        <div class="horizontalScrollItem">10</div>
        <div class="horizontalScrollItem">11</div>
        <div class="horizontalScrollItem">12</div>
        <div class="horizontalScrollItem">13</div>
        <div class="horizontalScrollItem">14</div>
        <div class="horizontalScrollItem">15</div>
        <div class="horizontalScrollItem">16</div>
        <div class="horizontalScrollItem">17</div>
        <div class="horizontalScrollItem">18</div>
        <div class="horizontalScrollItem">19</div>
        <div class="horizontalScrollItem">20</div>
      </div>
    </div>
  </section>

  <!-- ! end -->
  <section class="end">
    Нижняя часть
  </section>

</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>


</body>
</html>

БЛОГ НА HUSL

Как уменьшить размер scrollmagic-pin-spacer

Ответы (1 шт):