0

第一件事。我非常喜欢 GSAP 和他们的 Scrolltrigger。一切正常，但不幸的是，当用户调整浏览器窗口的大小时，我基于滚动在 x 轴上移动的对象不会更新。

x 值基于我编写的公式。

以下是稍后使用 matchMedia Scrolltrigger 在主时间轴中添加的部分功能：

    var seoShowBenefitsTl = gsap.timeline();
    seoShowBenefitsTl.addLabel("first Benefit")
        .to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit")
        .to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in,  onUpdate: function() {
            if (this.progress() >= 0.5) {
                document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged");
                document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged");
            } else {
                document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged");
                document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged");
            }
        }}, "first Benefit")
    //some more code
    return seoShowBenefitsTl

非常感谢您！

4

1 回答 1

0
  • 确保将实际补间添加到 ScrollTrigger 时间线，而不是时间线。由于以下几点，这有助于确保值更容易更新。
  • invalidateOnRefresh: true在 ScrollTrigger 时间线上使用。

做这些事情会导致这个演示。

于 2021-10-19T13:52:55.327 回答