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

Question

Can anyone tell me what I am doing wrong here? The start and end triggers don't match up with my trigger element at all and I can't figure out what is throwing it off.

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

In case anyone else is having trouble with this, I discovered that my issue was how I was referencing the trigger. I had set it in a variable as a jQuery object and instead I needed to just reference the class name.

  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);
}

Here is a pen:

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