将变量从 js 函数传递给 gsap scrollTrigger

Question

尝试根据窗口宽度修改 gsap scrollTrigger offset_value。不幸的是，当用户“即时”更改窗口大小时，无法弄清楚如何使用(window).resize(function() 实现此目的。此函数对 offset_value 变量没有影响。

这是现在的代码，显然我的方法存在根本性错误：

    gsap.registerPlugin(ScrollTrigger);
    var frame_count  = 37,
    offset_value = 360;
if (window.innerWidth < 980) {
    offset_value = 180;
     }
//This is the part that is not working
jQuery(window).resize(function() {
  if( jQuery(this).width() > 979 ){
    offset_value=360;}
    else {offset_value=180;}
    return offset_value;
});
//END This is the part that is not working

gsap.to(".iis-viewer", {
  backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
  ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
  scrollTrigger: {
    trigger: ".iis-scene",
    start: "top top",
    end: "+=" + (frame_count * offset_value),
    pin: true,
    scrub: true
  }
});

Answer 1

这类情况正是 ScrollTrigger 的 .matchMedia 方法所针对的。

你可以像这样设置你想要做的事情：

ScrollTrigger.matchMedia({
  // desktop
  "(min-width: 980px)": function() {
    const offset_value = 360;
    gsap.to(".iis-viewer", {
      backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
      ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
      scrollTrigger: {
        trigger: ".iis-scene",
        start: "top top",
        end: "+=" + (frame_count * offset_value),
        pin: true,
        scrub: true
      }
    });
  },
  
  // mobile
  "(max-width: 979px)": function() {
    const offset_value = 180;
    gsap.to(".iis-viewer", {
      backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
      ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
      scrollTrigger: {
        trigger: ".iis-scene",
        start: "top top",
        end: "+=" + (frame_count * offset_value),
        pin: true,
        scrub: true
      }
    });
  }
});

但是，由于您的用例只是切换了几个值（而不是需要不同的补间/滚动触发器），因此只使用函数值可能更有意义，因为函数值会在 ScrollTrigger 刷新（调整大小时）时更新：

let offset_value;

function updateOffsetValue() {
  offset_value = innerWidth > 979 ? 360 : 180;
}

window.addEventListener("resize", updateOffsetValue);
updateOffsetValue();

gsap.to(".iis-viewer", {
  backgroundPosition: () => (-offset_value * frame_count * 2) + "px 50%",
  ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
  scrollTrigger: {
    trigger: ".iis-scene",
    start: "top top",
    end: () => "+=" + (frame_count * offset_value),
    pin: true,
    scrub: true
  }
});