为啥 Scrolltrigger 在调整窗口大小时不更新我的动态 x 值？

Posted 2023-05-08

【中文标题】为啥 Scrolltrigger 在调整窗口大小时不更新我的动态 x 值？

【英文标题】：Why does Scrolltrigger not update my dynamically x value on window resize?为什么 Scrolltrigger 在调整窗口大小时不更新我的动态 x 值？

【发布时间】：2021-12-02 21:22:09

【问题描述】：

首先要做的事情。我非常喜欢 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

非常感谢您！

【问题讨论】：

请发送minimal, complete, and verifiable example。旁注，查看[最常见的 GSAP 错误[(greensock.com/mistakes)。

我做了一个演示：codepen.io/dr_pxl/pen/QWMjqPW 演示的一些注意事项：红色立方体滚动后应该移动到窗口的中心。它工作正常，但在调整窗口大小后，它不会移动到中心。如果我重新加载笔（在相同的窗口大小上它以前不起作用）并再次尝试它会再次起作用。

【参考方案1】：

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

做这些事情会导致this demo。