如何觸發 TweenMax Draggable 事件

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 鏈接。

Answer 1

ZachSaucier （GreenSock 成員）在這個案子上幫助了我。

為了實現這一點，您應該升級到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 鏈接。 我希望這個答案對某人有所幫助。 所有功勞歸功於ZachSaucier 。