Jump to content
Search Community

Repaint in animation

szsoma test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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

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.
×
×
  • Create New...