Как оптимизировать производительность "ScrollMagic + TweenMax + GSAP"? - PullRequest
Новая
       102

Как оптимизировать производительность "ScrollMagic + TweenMax + GSAP"?

2 голосов
/ 21 октября 2019

На первый взгляд простая анимация вызывает лаги и нестабильна на мобильных устройствах. Это выглядит вполне нормально для ПК, но не для мобильных устройств.
В Chrome я могу воспроизвести его, перейдя на F12> эмуляция мобильного телефона> iPhone 6/7/8 .
И когда страница прокручивается вниз, можно увидеть, что анимированный текст как будто движется вверх и вниз, другими словами, он прерывистый.
GIF с визуальным представлением
Codepen

PS Мне не удалось вставить сюда фрагмент рабочего кода, поскольку библиотеки не загружались вправильный порядок. Но вот 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 )
}


...