Jump to content
Search Community

SVG, Opacity and MSAA Rasterization

SPel 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

Hello,

My coworker made this animation prototype:

http://animation.addlab.it/ledbyled/index.html

 

However, after a good amount of analysis, it seems like chrome's MSAA rasterization is causing an heavy framerate drop. When MSAA is disabled (chrome://flags/#gpu-rasterization-msaa-sample-count set to 0), the frame rate is around 50fps, but when MSAA is enabled (as it is by default) it drops to 10fps (the exact rate depends on how big is the screen).

 

Doing a trace on the timeline, the bottleneck seems to be on the composite layer: with MSAA it takes more than 200ms, while it's 9ms when disabled!

 

Honestly we don't have a clue on how to solve this and clearly we can't say to our users to disable MSAA... Is there any known work around?

I tried the `will-change` CSS property, but nothing changed.

 

Thanks!

 

PS: if you want to rerun the animation without reloading the page, just run `init()` in the console.

See the Pen by ledbyled (@ledbyled) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello SPel and welcome to the GreenSock!

 

A codepen example would be better since we can test the cod live to better help you

 

But from what i see a couple of things you can try.

  1. Be careful about using the jQuery load() event, it has been deprecated by jQuery. It has known bugs and wont fire the window onload event consistently with jQuery load(). On the jQuery load() Docs page jQuery recommends to use bind("load") or on("load") for more consistent behavior of the load event. Also you want to also make sure the DOM is ready() along with the load event to make sure the DOM is ready and the window is loaded before animating anything.

    Since your using jQuery you can try this:
    // DOM is fully loaded - all HTML markup
    $(document).ready(function(){
    
        // wait until all images, links, CSS stylesheets, and assets are loaded
        $(window).on("load, function(){
      
              // custom code goes here
              init();
    
        });
    });
    
  2. To improve performance for opacity. I would recommend using autoAlpha instead of opacity.
    See the CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

    autoAlpha - Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
     
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});
    
  3. Keep in mind that since you are using SVG that the browser has to force re-layout and re-painting on every tick of the render frame. If you were using DIVs wrapped around your SVG graphical elements then the browser would be able to animate smoother. But that is the limitation with SVG, it cant push the rendering to the GPU for hardware acceleration, so SVG can only use the CPU. The only option for better performance is  to separate your SVG parts into separate div tags and animate the div tags opacity (or autoAlpha). But that is the nature of SVG, SVG 1.1 doesn't even support CSS 3D transforms, at least not until SVG 2.0.

Happy Tweening :)

  • Like 2
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...