Matt8629 Posted October 24, 2023 Share Posted October 24, 2023 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 24, 2023 Solution Share Posted October 24, 2023 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. 1 Link to comment Share on other sites More sharing options...
Matt8629 Posted October 25, 2023 Author Share Posted October 25, 2023 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now