Repaint in animation

[szsoma]

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.

[OSUblake]

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.

 

 

[szsoma]

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.

[OSUblake]

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).

[szsoma]

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..

[Jonathan]

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  

[szsoma]

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).

[szsoma]

So yes, unfortunately I still have some problems with it.

Can these frame drops are caused by the autoAlpha or something like this?

 

[Jonathan]

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.

 

[szsoma]

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.