为什么我的触发器在我的 Greensock TimelineMax 场景中没有正确定位？

Question

谁能告诉我我做错了什么？开始和结束触发器与我的触发元素完全不匹配，我不知道是什么原因导致的。

var opacityTrigger = $(".opacityTrigger");
var opacityDuration = $(".opacityWrapper").height();

var opacitytl = new TimelineMax();
var opacityItem = $(".opacityContainer li");

  opacitytl.staggerFrom(
    opacityItem,
    0.25,
    {
        opacity:"0"
    },
    0.25
  );

  var opacityScene = new ScrollMagic.Scene({
    triggerElement: opacityTrigger,
    triggerHook: 0.5,
    tweenChanges: true,
    duration: opacityDuration,
    reverse: true
  })
  .setTween(opacitytl)
  .addTo(self.controller);

Answer 1

万一其他人遇到这个问题，我发现我的问题是我如何引用触发器。我已将其作为 jQuery 对象设置在变量中，而我只需要引用 class 名称。

  var opacityDuration = $(opacityWrapper).height();
  var opacityItem = $(".opacityContainer li");
  var opacitytl = new TimelineMax();

  opacitytl.staggerFrom(
    opacityItem,
    0.25,
    {
      opacity:"0"
    },
    0.25
  );

  var opacityScene = new ScrollMagic.Scene({
    triggerElement: ".opacityTrigger",
    tweenChanges: true,
    duration: opacityDuration,
    reverse: true
  })
  .setTween(opacitytl)
  .addTo(controller);
}

这是一支笔：

https://codepen.io/moorehannah/pen/OaMNXg

为什么我的触发器在我的 Greensock TimelineMax 场景中没有正确定位？

Why are my triggers not positioned correctly in my Greensock TimelineMax scene?

gsap

scrollmagic