2

At first sight an easy animation causes lags and is choppy on mobile devices. It looks quite normal on PC resolution, but not on mobile.
In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8.
And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy.
GIF with visual representation
Codepen

P.S I was not able to insert working code snippet here because libraries wouldn't load in right order. But here's the 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 )
}


Andrey
  • 702
  • 1
  • 9
  • 22
  • I'm not able to reproduce any jank when emulating. Side note: your resize listener doesn't actually do anything useful here. You'd need to update the Scroll Magic scene: `yourScrollScene.duration(newDuration);`. Alternatively, use responsive units. – Zach Saucier Oct 21 '19 at 17:28
  • @ZachSaucier I've added a GIF for a better visual repsentation. The animation jiggles on my iPhone also, exactly as it can be seen in the GIF. Thanks for your suggestions though. – Andrey Oct 22 '19 at 06:20
  • JavaScript (JS) is a high level language which is inherently slow. All (no exceptions) JS libraries use JS to provide an interface to the native (fast) APIs. Libraries must provide a bullet proof, cover all interfaces, meaning that there is a lot of code running in libraries that is not directly necessary to complete the task you want it to do. If performance matters you should avoid libraries and interface directly with the Native API's as they are easy to use, well documented, and use compiled native code..JS libraries are the number one cause of poor performance on low end devices. – Blindman67 Oct 26 '19 at 16:34

0 Answers0