GSAP 水平滚动并捕捉父 Div 中的每个子 div

Question

美好的一天，

我正在开发一个使用 GSAP 的项目，以便对由父容器和 3 个子 div 组成的水平滚动条进行动画处理。我正在使用 GSAP 来处理我的水平滚动条。

我想修复我的代码，以允许捕捉用户在水平滚动条中看到的第一个 div。然后，当用户继续滚动时，它应该捕捉到第二个 div，最后捕捉到第三个 div。当用户滚动时，他们应该到达最后一个部分 div，该部分将 不应该对齐 所有对齐都应该只发生在水平滚动条中。

我的烦恼： 当用户滚动到第一个 div 时发生捕捉，反之亦然，如果用户向后滚动，它应该捕捉到第三个 div。

这是我想要实现的目标的小图：

我使用代码笔重现了我的代码的最小示例。

水平滚动示例

在我的代码中，每个子 div 上都会发生捕捉，但是，在进入 div 1 的容器时不会发生捕捉，而当用户在输入 div 3 时向后滚动时不会发生同样的情况。

我尝试过： 更改 gsap 对象中的触发点，这会导致视觉错误

gsap.to(videoSections, {
  xPercent: -100 * (videoSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal_container", // Here to trigger and initiate upon div 1
    markers: true,
    pin: true,
    scrub: 0.5,
    start: "top",
    end: "+=3000",
    snap: {
      snapTo: [0, 0.5, 1],
      duration: 0.05
    }

Answer 1

我认为你必须动态固定子元素，你尝试过吗？