Почему мои триггеры неправильно расположены в сцене 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, и вместо этого мне нужно было просто ссылаться на имя класса.

  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