javascript - 如何优化“ScrollMagic+TweenMax+GSAP”的性能？

Question

乍一看，一个简单的动画会导致滞后并且在移动设备上不稳定。它在 PC 分辨率上看起来很正常，但在移动设备上却不是。
在 Chrome 中，我可以通过转到F12 > emulate mobile > iPhone 6/7/8来重现它。
当页面向下滚动时，可能会看到动画文本有点上下晃动，换句话说，它是不稳定的。
带有视觉表示的 GIF
Codepen

P.SI 无法在此处插入工作代码片段，因为库不会以正确的顺序加载。但这里是 JavaScript：

var scene = $( '.rRnZuqay' );
var sceneHeight = $( window ).height();

$( window ).resize( function() 
{
    sceneHeight = $( window ).height();
})

var scrollMagicController = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 0,
        duration: sceneHeight
    }
});


for( var i = 1; i <= 4; i++ )
{
    var tween = TweenMax.to( "#bKttYWNK" + i + " > .yOTeuBuJ", 1, { 
        y: sceneHeight/2, 
        ease:Linear.easeNone,
        autoAlpha: 0
    });

    new ScrollMagic.Scene({ triggerElement: "#bKttYWNK" + i })
        .setTween( tween )
        .addIndicators()
        .addTo( scrollMagicController )
}

标签： javascriptjqueryscrollmagicgsap