不同 window 高度上的 ScrollMagic 偏移量

Question

我正在使用 ScrollMagic 在滚动时获取一些动画。问题是我需要使用偏移量以便动画在滚动的某个点触发，但这完全取决于 window 高度。

所以在我提供的示例中

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

你可以看到滚动出来的盒子。 https://tppr.me/RpkVa

注意 window 高度 https://tppr.me/hoyhs 尝试调整高度或预览面板和运行。

所以在 426px window 高度，它完美地工作。启动页面时没有框并在滚动时显示动画。

尝试增加高度并选中 https://tppr.me/sYJ5a，框出现在开头。同样，如果你降低高度，只有在滚动几次后才会出现这个框。

所以我想知道是否有任何方法可以使偏移值动态化，以便在任何 window 高度下，动画从页面滚动的完全相同的点开始。

Answer 1

是的，除了使用 offset，您可以使用 triggerHook 并将其设置为 0（或非常接近它）。

像这样：

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

不同 window 高度上的 ScrollMagic 偏移量

ScrollMagic offset on different window height

javascript

jquery

gasp

scrollmagic

gsap