First Animation scale jerky when magnifier images on Chrome (on Firefox is fluid)

[Matt8629]

 

When use chrome or edge the first few clicks have a super lag during the scaling of images (after DOM loading asset) using GSAP library. 

With firefox it doesn't happen, although I read around that the opposite often happens but I would rather do it in chrome to export it with electron.

 

The image is very heavy but the use is thought to be in a local machine (no internet) and I need a high resolution 

 

1. Is there any way to preload the GSAP animation avoiding this terrible initial snap? 

2. Why on firefox does it not do this? Is it a browser or library problem?

3. With css it doesn't do it however I lose the control of positions 

 

Am i wrong with something? Can you help me with some suggestions? 

Thanks 

 

Here the demo https://animdrops.xyz/static/02-magnifier/

Here a basic example with the same problem:  https://codepen.io/matt8629/pen/OJdJbXr

See the Pen OJdJbXr by matt8629 (@matt8629) on CodePen

[GreenSock]

Yeah, that actually has nothing to do with GSAP. It's purely about graphics rendering in the browser. That's a MASSIVE image that you're asking the browser to render, and each browser has its own strategies for optimizing performance for graphics rendering. Some may take the native image and push it over to the GPU as a texture, but others may "optimize" it by only using the reduced size that's being displayed in the browser initially, and then when you try to zoom in the browser is like "oh, crap, now I've gotta decode that whole image again and shove it over to the GPU to render it efficiently". They have various thresholds for image sizes that trigger slicing up the texture into tiles for memory efficiency. Again, none of that has anything to do with GSAP. As you can see, GSAP is doing exactly what it's supposed to do. And I'd bet that the actual load on the CPU is 0.001% GSAP and 99.999% browser graphics rendering

 

Try doing a performance capture in Dev Tools and you'll see what I mean. 

 

If I were you, I'd explore using a <canvas> object instead, and dynamically draw the image in an onUpdate. More hassle for sure, but my guess is that it'll perform much better, especially if you leverage WebGL. You could look into using PixiJS for the rendering. Just some ideas. 

 

Good luck! Feel free to post back with your results.

[Matt8629]

Thank you for the valuable advice.

I did a few quick test with PixyJS + GSAP and it is already super fast. This is the right way 
Thank you very much 😊

 

See the Pen dyaoGNb by matt8629 (@matt8629) on CodePen