0

我的网站上有部分正在使用ScrollTrigger. 一旦我实现Locomotive JS了，我所有的ScrollTrigger动画都停止了工作。

我通读了论坛，发现您需要update() ScrollTrigger何时Locomotive滚动。我实施了这一点，但没有看到任何结果。

然后，我调整了窗口的大小和我的ScrollTrigger动画，它们开始工作。

简而言之，动画会在调整大小时触发，但不会在页面加载时触发。

我已经实施update()并尝试过refresh()，但没有运气。

演示（这里也显示问题）：

$(function() {

  gsap.registerPlugin(ScrollTrigger);

  function animateFrom(elem, direction) {
    direction = direction || 1;

    var x = 0, y = direction * 100;
    if(elem.classList.contains("gsap_reveal--fromLeft")) {
      x = -100;
      y = 0;
    } else if (elem.classList.contains("gsap_reveal--fromRight")) {
      x = 100;
      y = 0;
    }

    elem.style.transform = "translate(" + x + "px, " + y + "px)";
    elem.style.opacity = "0";

    gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, {
      duration: 2,
      x: 0,
      y: 0,
      autoAlpha: 1,
      ease: "expo",
      overwrite: "auto"
    });

  }

  function hide(elem) {
    gsap.set(elem, { autoAlpha: 0 });
  }

  gsap.utils.toArray(".gsap_reveal").forEach(function(elem) {
    hide(elem); // assure that the element is hidden when scrolled into view
    ScrollTrigger.create({
      trigger: elem,
      onEnter: function() { animateFrom(elem) },
      onEnterBack: function() { animateFrom(elem, -1) },
      onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
    });
  });

    const pageContainer = document.querySelector("[data-scroll-container]");

    const scroll = new LocomotiveScroll({
      el: pageContainer,
      smooth: true
    });


    // each time locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
    scroll.on(pageContainer, ScrollTrigger.update);

    // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things
    ScrollTrigger.scrollerProxy(pageContainer, {
      scrollTop(value) {
        return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
      }, // we don't have to define a scrollLeft because we're only scrolling vertically.
      getBoundingClientRect() {
        return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
      }
    });

    window.addEventListener("load", function (event) {
      ScrollTrigger.refresh();
    });

    ScrollTrigger.addEventListener("refresh", () => scroll.update());
    ScrollTrigger.refresh();


});
.hero {
  min-height: 1000px;
  background: lightblue;
  display: flex;
  align-items: center;
}

.textImageRepeater {
  overflow: hidden;
  padding: 120px 0 160px 0;
}
.textImageRepeater__intro {
  margin-bottom: 66px;
}
.textImageRepeater__layout--row {
  flex-direction: row !important;
}
.textImageRepeater__layout--rowReverse {
  flex-direction: row-reverse !important;
}
.textImageRepeater__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 70px;
  justify-content: space-between;
}
.textImageRepeater__header {
  margin: 17px 0;
}
.textImageRepeater__graphic {
  margin: 0;
}
.textImageRepeater__text, .textImageRepeater__graphic {
  flex-basis: 50%;
}
.textImageRepeater__text {
  max-width: 500px;
}

.c-scrollbar_thumb{
  background-color: #5D209F!important;
  width: 7px;
  margin: 2px;
  opacity: 1;
  border-radius: unset;
  mix-blend-mode: multiply;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div data-scroll-container>
  <div data-scroll-section>

    <section class="hero">
      <div class="container">
        <div class="row justify-content-center justify-content-xl-between">
          <div class="col-12 col-md-10 col-lg-9 col-xl-5">
            <div class="hero__text text-center text-xl-start">
              <h1 class="hero__title" data-scroll data-scroll-speed="2">Title</h1>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="textImageRepeater">
      <div class="container">
        <div class="row">
          <div class="col-12">

            <div class="textImageRepeater__item textImageRepeater__layout--row">
              <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight">
                <div class="textImageRepeater__copy">
                  <h2>Header</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
              </div>
              <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft">
                <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy">
              </div>
            </div>

            <div class="textImageRepeater__item textImageRepeater__layout--rowReverse">
              <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight">
                <div class="textImageRepeater__copy">
                  <h2>Header</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
              </div>
              <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft">
                <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy">
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>

  </div>
</div>

测试 1

我意识到的是，如果我注释掉我的所有内容locomotive js并运行：

$(window).on('scroll', function() {
  console.log("test");
});

将logs显示，但它们不会在locomotive活动时显示。

不确定这是否表明出了什么问题？

测试 2

在我的代码片段的最后，我运行了以下命令来检查是否refresh()正在运行并且它正在返回else语句。再次，不知道为什么。

if (ScrollTrigger.refresh()){
  console.log("true");
} else{
  console.log("false");
}

重建步骤：

  1. 打开这个小提琴
  2. 将输出框扩大到某个宽度（即1300px）
  3. 运行小提琴
  4. 向下滚动，您会看到未加载的元素
  5. 将输出框调整为更小的尺寸
  6. scrollTrigger动画现在出现

这是一个展示问题的 gif：

在此处输入图像描述

4

1 回答 1

1

这些是我试图让动画运行的内容。

1. 让 ScrollTrigger 知道新的滚动条。

当您使用机车滚动时，这意味着 ScrollTrigger 所基于的本机滚动已被删除。所以我们通过这样做把它带回来：

ScrollTrigger.create({
    scroller: "[data-scroll-container]" // this is what you're missing
    // your other options
});

阅读ScrollTrigger > scroller的文档

2. 最后分配 ScrollTrigger 补间。

我不太确定，但原因可能很简单，因为一旦设置了整个滚动系统，就需要分配补间。

// init Locomotive
// ...

// create ScrollTrigger
gsap.utils.toArray(".gsap_reveal").forEach(function(elem) {
    hide(elem); // assure that the element is hidden when scrolled into view
    ScrollTrigger.create({
      scroller: "[data-scroll-container]",
      trigger: elem,
      onEnter: function() { animateFrom(elem) },
      onEnterBack: function() { animateFrom(elem, -1) },
      onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
    });
  });

见JSFiddle

于 2022-01-23T15:37:31.183 回答