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

Posted 2023-05-08

【中文标题】将变量从 js 函数传递给 gsap scrollTrigger

【英文标题】：Pass variable from js function to gsap scrollTrigger

【发布时间】：2021-02-10 19:53:09

【问题描述】：

尝试根据窗口宽度修改 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
  
);

【参考方案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
  
);

【讨论】：

请注意，您更有可能在the GreenSock forums 上获得更快的响应。补间快乐！

感谢您的帮助！第一个解决方案成功了 :-) 无法让第二个解决方案工作（窗口调整大小时值没有改变），可能是因为动画在 wordpress 和 divi 主题内？也感谢关于 GS 论坛的提示。干杯！

很难在没有看到错误或完整代码的情况下说出问题所在。如果答案为您提供了解决方案，您应该单击它旁边的复选标记将其标记为已接受。