Share Posted July 11, 2017 Hi! I've built an animation with greensock and I checked the repaint in Chrome (and in Firefox too). And there are. Is it okay or should I optimize my animation somehow? Thanks, Soma See the Pen vZgxmq by szsoma (@szsoma) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 12, 2017 A lot of things can cause a repaint. Yours are caused by autoAlpha (changing the visibility), and animating an SVG (graphics aren't rasterized). But the real question is do any of those matter? Look at the performance timeline I took. The browser is painting only a fraction of the time. It's idle most of the time, which is good. You want to see large gaps in between animation frames. But this is a snapshot running on a desktop. You should always test on mobile as performance may drop considerably. 3 Link to comment Share on other sites More sharing options...
Author Share Posted July 12, 2017 All right, thanks for the answer! By the way I get only 30fps. Am I doing someting wrong? I tested on mobile devices, but it's silky smooth. Link to comment Share on other sites More sharing options...
Share Posted July 12, 2017 1 minute ago, szsoma said: By the way I get only 30fps. Am I doing someting wrong? It might be your monitor. FPS can't go any higher than your monitor's refresh rate (Hz). 2 Link to comment Share on other sites More sharing options...
Author Share Posted July 12, 2017 8 minutes ago, OSUblake said: It might be your monitor. FPS can't go any higher than your monitor's refresh rate (Hz). It works on 60Hz so I'm totally puzzled.. Link to comment Share on other sites More sharing options...
Share Posted July 12, 2017 Keep in mind when testing performance / repaints through the browser, that you MUST test in Incognito (chrome) or private browsing (firefox) modes. Since not testing in those private modes can cause skewed results due to running extensions and other factors. Both Mozilla and Google Devs recommend this. Just my two cents 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 12, 2017 3 minutes ago, Jonathan said: Keep in mind when testing performance / repaints through the browser, that you MUST test in Incognito (chrome) or private browsing (firefox) modes. Since not testing in those private modes can cause skewed results due to running extensions and other factors. Both Mozilla and Google Devs recommend this. Just my two cents Wow! Magic! I got the 60 fps. Thank you! Yes, I'm new in greensock (and web animation). 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 12, 2017 So yes, unfortunately I still have some problems with it. Can these frame drops are caused by the autoAlpha or something like this? Link to comment Share on other sites More sharing options...
Share Posted July 12, 2017 Hello Again autoAlpha should actually help with performance due to the nature of how opacity works with the visibility property. So i dont think its autoAlpha causing this. When your testing.. are you testing in codepen? If you are makes sure you are viewing your codepen in codepen's Full Page mode so it doesnt load your pen in an iframe. See the Pen vZgxmq by szsoma (@szsoma) on CodePen Also if your are seeing this when testing in codepen, try using the Export button (located in the bottom right corner of codepen) and download your codepen so you can run it locally outside of codepen. Codepen is notorious for not performing so hot due to the high volume on their website. And one last thing since you are animating SVG, you cant take advantage of hardware acceleration of 3D transforms. This is due to SVG not supporting 3D. So right now your elements are animating using matrix() instead of matrix3d() for the transform attribute. SVG 2 will support 3D transforms fully but we have to wait for that to come out. You could also try and optimize your SVG code to make sure its optimized tight as possible: https://jakearchibald.github.io/svgomg/ Just remember to toggle Clean IDs off. 5 Link to comment Share on other sites More sharing options...
Author Share Posted July 13, 2017 Hi! Thank you for your advice. I always test in "debug mode" and I also have a github page with this animation. I'll try few tricks and we'll see. 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