Jump to content
GreenSock

szsoma

Repaint in animation

Recommended Posts

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

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.

 

nhmmFwq.jpg

 

  • Like 3
Link to comment
Share on other sites

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.

Képkivágás.JPG

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

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

  • Like 4
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

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


 fps.JPG.0e000741d34038eccb32f783392d4bd4.JPG

Link to comment
Share on other sites

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.

 

:)

  • Like 5
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×