Choppy on retina, smooth elsewhere, why?

[kocosh]

Hey guys, 

 

all day I've been trying to find a solution to the animation choppiness on retina display (most noticeable in Chrome, though present also in Safari/FF...) - when I move the window from MB Pro 13" display to my external 24" screen (1920x1200), it's all smooth... ?

 

I know that transforms of full-screen images ain't ideal, but they're compressed to about 200kB each (1920px by 1920px) - besides that, even when I use smaller images (720px, about 50kB), the problem persists. I've tried swapping the divs with background-images for regular imgs, but no luck there... Also I've rearranged the timeline to eliminate as much simultaneous tweens as possible... CSSPlugin.defaultForce3D = false didn't help either whereas turning it on (true) seemed to help a tiny bit, as well as disabling the easing by TweenMax.defaultEase = Linear.easeNone.

 

The thing is I came across several posts regarding the "retina issue" but no solution unfortunately.

 

Video demonstration here: https://youtu.be/HieVenfcsWI (screen recorder makes it worse than it actually is - non-retina is 100% smooth, retina is a bit smoother)

Code here: http://ideup.cz/krouzek2 (there is nothing else but ScrollMagic with GSAP)

 

Any ideas would be really appreciated Thanks a lot!

 

[GreenSock]

It doesn't matter much how compressed the original image files are - the key thing for the browser is just how many pixels it must paint on each tick. You're asking a lot of the browser whenever you're doing full-screen rotations like that because it literally has to repaint almost every single pixel in the entire browser. 

 

It'd be a bit of a pain, but I suspect you'd get better performance if you had a single <canvas> that you painted the appropriate bg image to. That way, the browser only has to worry about one element that's clipped just to the screen size rather than compositing a bunch of elements that sometimes extend outside the window (when rotated). But I'm not 100% positive that'll solve your problems - I'm just theorizing here. 

 

The biggest issue BY FAR is browser rendering (compositing I believe) which is totally unrelated to GSAP. 

 

You could also try setting TweenLite.ticker.fps(30) to cap the frame rate, but that doesn't really solve things. 

 

Another thing to try is to do the opacity changes to the image and content instead of the container because of the way layerizing works in browsers. I'm guessing that'd be cheaper performance-wise even though you're technically altering opacity on 2 elements instead of 1. Again, I'm not sure this will solve things, but it's worth a shot. 

 

Maybe something like Pixi.js could tap into WebGL to handle the big rotating bg images. That's just a version of my first recommendation (using <canvas>)

 

Hope that helps. 

[OSUblake]

A retina display has to draw 2 or 3 times as many pixels. Whatever this value is...

 

console.log(window.devicePixelRatio);

 

 

 

3 hours ago, GreenSock said:

Maybe something like Pixi.js could tap into WebGL to handle the big rotating bg images. That's just a version of my first recommendation (using <canvas>)

 

Heavy fullscreen image rotation with PixiJS, although I had to do a little optimization. Instead of using 3 1000x1000 images for each sequence, I combine them into a single spritesheet. Drawing a single 2000x2000 image performed a lot better than 3 1000x1000 images.

 

See the Pen pLoVXQ by osublake (@osublake) on CodePen