2

我有一个问题，GSAP 和 ScrollTrigger 不断出现。

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

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

奇怪的是，如果顶部从右侧滑入，那么下一部分就可以了，但是页面再往下会导致问题。

我在这里有一个 Codepen： 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,
});
});

如您所见，它们完全相同，只是运动方向不同，因此没有意义。

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

4

1 回答 1

1

您的固定部分都处于相同的 HTML 级别，并且没有父级来实际固定它们。并且您不按顺序初始化它们，这会使 HTML 结构混乱。

如果您的部分按此顺序排列left-right-left-right，则应按相同顺序运行 ScrollTrigger。到目前为止，您的脚本运行得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。

于 2022-01-29T08:07:55.013 回答