如何触发 TweenMax Draggable 事件

【问题标题】：How to trigger TweenMax Draggable event如何触发 TweenMax Draggable 事件
【发布时间】：2020-06-01 06:32:48
【问题描述】：

我有一个draggable 栏，可以水平拖动。我要做的是，在页面滚动时是否可以触发draggable 事件拖动？

我在下面提供了示例代码。

<div class="bar">
  <div id="handler"></div>
</div>

这是初始化。

Draggable.create("#handler",{
  type:"x",
  bounds: $('.bar')
});

这样可以吗，

$(window).scroll(function() {
  //move #handler horizontally
});

请查看codepen link。

【问题讨论】：

标签： javascript draggable gsap

【解决方案1】：

ZachSaucier（GreenSock 成员）helped me 在这种情况下。

为了实现这一点，您应该升级到GSAP 3 并使用ScrollTrigger 插件。

const distObj = { x: 0, maxY: 0 };
let tween;
let ST;

function update() {
  // Update values as needed
  distObj.x = innerWidth - gsap.getProperty("#handler", "width");
  distObj.maxY = ScrollTrigger.maxScroll(window);

  // Kill off old things but keep the old progress
  let progress = 0;
  if(tween) {
    progress = tween.progress();
    ST.kill();
    drag.applyBounds({minX: 0, maxX: innerWidth});
  }

  // Create or recreate the tween and scroll trigger
  tween = gsap.fromTo("#handler", {x: 0}, {
    x: distObj.x,
    ease: "none",
    paused: true,
    overwrite: "auto"
  }).progress(progress);

  ST = ScrollTrigger.create({
    animation: tween,
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    scrub: true
  });
}

update();
ScrollTrigger.addEventListener("refreshInit", update);

var drag = Draggable.create("#handler", {
  trigger: "#handler",
  type: "x",
  bounds: {minX: 0, maxX: innerWidth},
  onDrag: function() {
    const progress = this.x / distObj.x;
    tween.progress(progress);
    ST.scroll(progress * distObj.maxY);
  }
})[0];

这是更新后的CodePen link. 我希望这个答案对某人有所帮助。所有功劳归于 ZachSaucier。

【讨论】：