Jump to content
Search Community

Issue with firefox scroll performance and chrome svg rendering

jimthornton test
Moderator Tag

Go to solution Solved by Carl,

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

Hey GSAP People, 

 

Ok. SO I'm loving GSAP. But I'm having a little trouble with performance, specifically blur on scale for SVGs in chrome (v43.0.2357 on mac) until fully rendered animation and choppiness in firefox (v38.0.5 on mac). 

 

 

chrome-blurry-svg.png

 

I've read a bunch of stuff and saw a solution in making elements larger initially and then scaling down as needed so the "capture" has better pixelation. I'm working with mostly full width SVGs. So I tried implementing this solution with css svg {width: 500%; height: auto} and then using TweenMax.from's for scale(0.2):

 

My attempt here: scale issue

 

You can see that on scroll there is a huge lag, and then it tries to catch up and essentially skips the above the fold parallax animation. It also creates issues resizing the svg when scrolling back up:

 

scale-on-lag.png

 

But if I ignore the blur issue, and don't enlarge elements and then scale down as needed with tweens, it scrolls just fine here except on firefox. So I looked at lagSmoothing() but am having trouble implementing it and kind of feeling like I must be missing something if the performance is this bad and I need it in animating 20-30 elements. 

 

I also tried animating width of the divs wrapping SVGs with SVGs at 100% width and that actually fixed the blur issue in chrome, but created even worse performance issues in firefox. This actually seems like a good solution (

See the Pen gpxxRJ by jimthornton (@jimthornton) on CodePen

) except its shaky in webkit? but seemed like it started causing strain getting choppier on scroll when I was animating a series of them because i'm also animating the marginLeft to keep it centered. 

 

For main codepen, you can see that I used width on the lowest two divs in codepen but kept scale for upper divs to see the difference. 

 

I also feel like I might be putting too much strain with how the animations are updating? 

 

Does anyone have any suggestions? Am I implementing the scale down enlarged elements as needed wrong? 

 

Thanks for any help anyone might be able to provide. 

 

See the Pen OVjmbb by jimthornton (@jimthornton) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the examples and detailed descriptions of what you have tried.

I liked the parallax forest effect quite a lot. Very creative. 

 

We have been hearing quite a few gripes about FireFox's performance with SVG. I really wish I had better news for you, but I really don't have any tricks up my sleeves to get around it. From what I can tell its just choking on recalculating the path data and rendering it. Although Flash also struggled at times with heavy vectors its hard to imagine why a modern browser on decent hardware is struggling so much. 

  • Like 1
Link to comment
Share on other sites

Thanks for your quick reply Carl

 

It does seem like the more animations added to each element, the more work is being done, especially when using percentages for absolute positioning changes? I know there's a plethora of ways to animate with gsap. Do you know of any documentation on performance of different methods? Should I be staying away from anything specific? Like toggling css classes or animating with left, right, etc., percentages? 

 

If not, I'll look into learning how to measure performance with chrome dev tools timeline. It's all kind of over my head right now . I even tried adding a check FPS plugin to no avail.

 

Re chrome, do you have any idea what I'm missing with trying to fix the blur on scale issue by increasing and recentering svgs then using tweenmax.from to scale to a percentage? 

 

Thanks again

Link to comment
Share on other sites

Re chrome, do you have any idea what I'm missing with trying to fix the blur on scale issue by increasing and recentering svgs then using tweenmax.from to scale to a percentage? 

 

 

I'm having trouble following what you are doing here or knowing where to look in the code. It would help if you could reduce the demo to just a single element with the minimal amount of js-code (no scrolling). 

 

In general, all browsers appear to handle SVGs differently and from what I know they do not use hardware acceleration. 

I haven't done extensive cross-browser tests on what properties or units perform best, we just know that FireFox doesn't do well with scale – but everything else seems to run quite well. I'm sure over time we'll have more to report in this regard, this SVG stuff is just very new and the battle-tests are just beginning.

Link to comment
Share on other sites

I am just jumping here with some experience having a similar issue - Chrome was not respecting some of my direct transformations so I had to use css:{}. That solves Chrome problems but (it appears that) slows down Firefox.

 

So test, test and test again. If you don't need CSS repositioning - avoid it. And we'll all have to wait for fixed version of Firefox that should match SVG animations in Chrome and Safari.

Link to comment
Share on other sites

So for posterity, i was referring to the SVG layers getting blurry on scroll with a scale tween, when I changed it to animating the width of the div, the blurryness issue went away but the performance in firefox was subpar.

 

I ended up removing all of the divs and putting the 14 or so SVGs into one SVG and tweened the identifiers directly. This fixed the blurriness in Chrome on the SVGs when scaling their sizes up (by scrolling) and helped with firefox performance a little from what I can tell. I also think there's an element where binding it to the scroll event is what's making firefox perform poorly. 

 

I was also animating top and bottom properties with percentage changes absolute positioning and changed that to x/y. 

As Jan Paepke points out here, transforms should be used over top and left tween animations (when using scrollmagic.js). I think this made the biggest ff improvement

Link to comment
Share on other sites

  • Solution

Thanks for the added info. Sounds like all good improvements. 

 

I would definitely recommend not tying any animation code or DOM manipulation to scroll events directly. They fire super fast and can fire a bunch of times (more than the frame rate) during scrolling. If the browser is only refreshing the screen 60 times per second, anything more frequent than that is wasteful. Its generally recommended that you throttle scroll events as shown in this little demo: http://codepen.io/GreenSock/pen/ulrJD

 

And here is a great article about a jQuery plugin for throttling and debouncing: http://benalman.com/projects/jquery-throttle-debounce-plugin/

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