如何触发TweenMax可拖动事件

Question

我有一个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。

Answer 1

ZachSaucier（GreenShock成员）帮助我解决了此案。

为了实现此目的，必须升级到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。