将变量从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
      }
    });
  }
});

但是，由于您的用例只是切换了几个值(而不是要求不同的when / ScrollTrigger )，所以只使用函数值可能更有意义，因为当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
  }
});