javascript - 在 ScrollTrigger GSAP 水平滚动中为子元素设置动画

Question

我有一个 svg这构成了我的 horizontal 的基础滚动条。
在这个svg ，我添加了类.animate当项目进入视野时，我想要淡入淡出的元素。 svg 中的所有文本项中都添加了 .animate 类供引用。 .
目前，只有 .animate最初出现在 View 中的元素会淡出。当我向下滚动以继续滚动时，其他元素是静态的。他们没有淡入或translating以任何方式上升或下降？
TL;DR，这是我想要实现的目标:

当滚动条固定到位并且用户继续向下滚动时，开始逐渐消失.horizontalScroller__intro .

一次.horizontalScroller__intro已经消失，开始水平滚动 .horizontalScroller__items

任何具有 .animate 类的元素在我的滚动条中将淡入到原来的位置。

备注 :我了解在此处发布代码的 SO 规则和偏好。但是，我的演示包含一个长度 SVG，我无法在此处发布，因为它超出了 SO 的字符限制。
Here is a demo of my latest approach
来自 scrollTrigger docs , containerAnimation是什么有助于在水平滚动条上实现动画，也是我试图实现的。
但是，在我上面的演示中，我遇到了以下问题:

.horizontalScroller__intro最初不显示，何时应该，并且应该在滚动时淡出。

水平滚动条不再起作用

.animate可见的元素不会淡入

如果我使用 timeline (见下面的片段)，然后介绍淡出和滚动工作。但是，在子元素中没有动画，这是我需要 containerAnimation 的地方

$(function() {

  let container = document.querySelector(".horizontalScroller__items");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: ".horizontalScroller",
      anticipatePin: 1,
      scrub: true,
      invalidateOnRefresh: true,
      refreshPriority: 1,
      end: '+=4000px',
      markers: true,
    }
  });

  tl.to('.horizontalScroller__intro', {
    opacity: 0,
  })

  tl.to(container, {
    x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
  })

});

我正在努力寻找一种方法来让介绍淡入、滚动条水平滚动以及 .animate淡入或淡入的元素。
编辑:
@onkar ruikar , 请参阅基于 your sandbox 的注释以下:

当您向下滚动并进入 View 时，我想要初始 .animate向上滚动到 View 中的元素(当前，一旦文本消失，然后水平滚动条开始工作，只有这样 .animate 应该在 View 中，才会向上淡入

在初始 .animate 之后元素已加载，下一个 .animate作为滚动条一部分的元素，它们不会淡入。它们是静态的。作为每个 .animate元素进入视野，然后它应该淡入淡出(我认为它当前触发一次，对于所有元素)。

在此处查看视觉效果:

在上面的 gif 中，你可以看到前两个文本 block 是隐藏的，一旦它们出现，我希望它们淡出。然后第三和第四个文本 block 是静态的，当用户滚动到该部分时它们应该淡出。

Answer 1

您需要使用 onUpdate滚动触发器上的方法。

onUpdate: self => console.log("progress", self.progress)

基于 self.progress设置不透明度、x 位置等。
完整演示 codesandbox .点击右下角的“Open Sandbox”按钮查看代码。

if ("scrollRestoration" in history) {
  history.scrollRestoration = "manual";
}
$(function() {
  let container = document.querySelector(".horizontalScroller__items");
  let elements = gsap.utils.toArray(
    document.querySelectorAll(".animate")
  );
  let intro = document.querySelector(".horizontalScroller__intro");
  let svg = document.querySelector("svg");
  let animDone = false;
  window.scrollPercent = -1;

  var scrollTween = gsap.to(container, {
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: ".horizontalScroller",
      anticipatePin: 1,
      scrub: true,
      invalidateOnRefresh: true,
      refreshPriority: 1,
      end: "+=600%",
      markers: true,
      onEnter: (self) => {
        moveAnimate();
      },
      onLeaveBack: (self) => {
        resetAnimate();
      },
      onUpdate: (self) => {
        let p = self.progress;
        if (p <= 0.25) {
          let op = 1 - p / 0.23;
          intro.style.opacity = op;
          animDone = false;
        }

        if (p > 0.23) {
          moveAnimate();
          // we do not want to shift the svg by 100% to left
          // want to shift it only by 100% - browser width
          let scrollPercent =
            (1 - window.innerWidth / svg.scrollWidth) * 100;
          let shift = ((p - 0.22) * scrollPercent) / 0.78;
          gsap.to(svg, {
            xPercent: -shift
          });
        }
      }
    }
  });

  function resetAnimate() {
    gsap.set(".animate", {
      y: 150,
      opacity: 0
    });
  }
  resetAnimate();

  function moveAnimate() {
    for (let e of elements) {
      if (ScrollTrigger.isInViewport(e, 0.4, true))
        gsap.to(e, {
          y: 0,
          opacity: 1,
          duration: 2
        });
    }
  }
});

您需要在 .animate 上设置不透明度 0 CSS 中的元素。并使用 end: '+=400%'而不是 4000 像素。相对尺寸可以很容易地用于基于位置的计算。