GSAP 和 ScrollTrigger 部分重叠并在上一节完成之前执行

Question

GSAP 和 ScrollTrigger 不断出现问题。

我有多个固定部分，当用户滚动到一个部分时，图像会从侧面滑入。

当我让这些图像从同一侧滑入时，一切都很好，但是一旦我让一个部分从右侧滑入，这些部分就会开始重叠，就好像它是在前一个图钉完成之前执行的一样。

奇怪的是，如果顶部部分从右侧滑入，则下一部分没问题，但页面下方的任何部分都会导致问题。

我这里有一个代码笔： https://codepen.io/rob-wahlberg-beaney/pen/BamNxaN?editors=1010

这是向左滑动内容的代码：

gsap.utils.toArray(".product-container--slide-left").forEach((productContainer) => {
const productImages = productContainer.querySelector(".product-images");
const allLists = productContainer.querySelectorAll(".product-images__list");

const allEls = productContainer.querySelector(".product-images__list").querySelectorAll("li");
const allElsLength = allEls.length;

var totalWidth = allEls[0].offsetWidth * allElsLength + 90;

allLists.forEach(function (list) {
    list.style.width = totalWidth;
});

gsap.set(productContainer.querySelectorAll(".product-images__list"), {
    right: 0,
    x: totalWidth,
});
gsap.to(productContainer.querySelectorAll(".product-images__list"), {
    scrollTrigger: {
        trigger: productContainer,
        //start: "top center",
        pin: true,
        start: "top top", // when the top of the trigger hits the top of the viewport
        scrub: 1,
        toggleActions: "play none none reverse",
    },
    x: 0,
    duration: 1,
    offset: 500,
});
});

下面是使它们向右滑动的代码：

gsap.utils.toArray(".product-container--slide-right").forEach((productContainer) => {
const productImages = productContainer.querySelector(".product-images");
const allLists = productContainer.querySelectorAll(".product-images__list");

const allEls = productContainer.querySelector(".product-images__list").querySelectorAll("li");
const allElsLength = allEls.length;

var totalWidth = allEls[0].offsetWidth * allElsLength + 90;

allLists.forEach(function (list) {
    list.style.width = totalWidth;
});

gsap.set(productContainer.querySelectorAll(".product-images__list"), {
    left: 0,
    x: -totalWidth,
});
gsap.to(productContainer.querySelectorAll(".product-images__list"), {
    scrollTrigger: {
        trigger: productContainer,
        //start: "top center",
        pin: true,
        start: "top top", // when the top of the trigger hits the top of the viewport
        scrub: 1,
        toggleActions: "play none none reverse",
    },
    x: 0,
    duration: 1,
    offset: 500,
});
});

如你所见，它们完全相同，唯一不同的是运动方向，所以没有意义。

导致问题的部分有 class“.product-container--slide-left”，当您滚动到第二部分时会显示问题。

Answer 1

您的固定部分都在同一 HTML 级别，并且没有父项可以实际固定它们。而且你没有按顺序初始化它们，这使得 HTML 结构混乱。

如果您的部分按此顺序 left-right-left-right，您应该运行 ScrollTrigger 按相同的顺序。到目前为止，您的脚本运行ning 像 left-left-right-right 这样不好。

针对您的情况的解决方案是从上到下按顺序初始化 ScrollTrigger，我们可以通过将您的脚本合并成这样来实现。

gsap.utils
    // select all the left and right sections
    .toArray('[class*="product-container--slide-"]')
    .forEach((productContainer) => {
        const allEls = productContainer
            .querySelector(".product-images__list")
            .querySelectorAll("li");
        const allElsLength = allEls.length;

        var totalWidth = allEls[0].offsetWidth * allElsLength + 90;
        const allLists = productContainer.querySelectorAll(".product-images__list");

        allLists.forEach(function(list){
            list.style.width = totalWidth;
        });

        // check if this section is left or right
        const isLeft = productContainer.classList.contains(
            "product-container--slide-left"
        );

        // change the value based on direction
        gsap.set(productContainer.querySelectorAll(".product-images__list"), {
            right: isLeft ? 0 : "",
            left: isLeft ? "" : 0,
            x: isLeft ? totalWidth : -totalWidth
        });
        gsap.to(productContainer.querySelectorAll(".product-images__list"), {
            scrollTrigger: {
                trigger: productContainer,
                //start: "top center",
                pin: true,
                start: "top top", // when the top of the trigger hits the top of the viewport
                scrub: 1,
                toggleActions: "play none none reverse",
                markers: true
            },
            x: 0,
            duration: 1
        });
    });

看到这个CodePen。

GSAP 和 ScrollTrigger 部分重叠并在上一节完成之前执行

GSAP and ScrollTrigger sections overlapping and executing before previous section has finished

javascript

gsap

scrolltrigger