ScrollMagic offset on different window height

I am using ScrollMagic to get some animations on scroll. The problem is that I need to use offset so that the animation triggers on some point of scroll but it totally depends on the window height.

So in the example i have provided

https://jsfiddle.net/5tvrnfkx/12/

you can see the box coming out on scroll. https://tppr.me/RpkVa

Notice the window height https://tppr.me/hoyhs try resizing the height or preview panel and run.

So in 426px window height, it works perfectly. starts the page with no box and animates on scroll.

Try increasing the height and check https://tppr.me/sYJ5a, the box appears at the start. similarly, if you reduce the height, the box appears only after few scroll.

So I was wondering if there's any way to make the offset value dynamic so in any window height, the animation starts at the exact same point of scroll of page.

Yes, instead of using offset, you can use triggerHook and set it to 0 (or very close to it).

Like this:

jQuery(function() {

  var controller = new ScrollMagic.Controller();

    var tween = TweenMax.to("#boxAnim", 1, {className: "+=animate"});
    var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300, triggerHook: 0})
            .setTween(tween)
            .addTo(controller);


  var height = $(window).outerHeight();

  $('.height').append(height);
});