4

我有一个svg构成我的horizontal滚动条的基础。

在此范围内svg，我已将类添加.animate到要在项目出现时淡入淡出的元素中。.animate 类供参考已添加到 .animate 中的所有文本项中svg。

目前，只有.animate最初在视图中的元素才会淡出。当我向下滚动以继续滚动时，其他元素是静态的。他们没有translating以任何方式淡入或上升或下降？

TL; DR，这就是我想要实现的目标：

  • 当滚动条固定到位，并且用户继续向下滚动时，开始逐渐消失.horizontalScroller__intro。
  • 一旦.horizontalScroller__intro消失，开始水平滚动.horizontalScroller__items
  • 我的滚动条中任何具有类的元素.animate都将淡入到其原始位置。

注意：我了解在此处发布代码的 SO 规则和偏好。但是，我的演示包含一个长度 SVG，我无法在此处发布，因为它超出了 SO 的字符限制。

这是我最新方法的演示

从scrollTrigger 文档中，containerAnimation有助于在水平滚动条上实现动画，也是我试图实现的。

但是，在我上面的演示中，我遇到了以下问题：

  1. .horizontalScroller__intro最初不显示，何时应该，并且应该在滚动时淡出。
  2. 水平滚动条不再起作用
  3. 视图中的.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，请参阅下面基于您的沙箱的注释：

  1. 当您向下滚动并进入视图时，我希望初始.animate元素向上滚动到视图中（当前，一旦文本消失，然后水平滚动条开始工作，只有这样.animate应该在视图中的元素才会消失在上
  2. .animate加载初始元素后.animate，作为滚动条一部分的下一个元素不会淡入。它们是静态的。当每个.animate元素进入视野时，它应该淡入淡出（我认为它当前触发一次，对于所有元素）。

在此处查看视觉效果：

在此处输入图像描述

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

4

1 回答 1

2

您需要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在 CSS 中的元素上设置不透明度 0。并使用end: '+=400%'而不是 4000px。相对尺寸可以很容易地用于基于位置的计算。

于 2022-02-03T08:50:06.323 回答