Jump to content
Search Community

1 FPS with DrawSVG on Chrome + Mobile (FF works!?)

galahad9gr 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

Dear GSAP comrades,

 

Why do I get for some HOSTED DrawSVG animations from codepen 1 FPS when using CHROME on Mobile?

 

They work fully FINE ON FF but just not on CHROME! How can this be?

Only on Codepen it runs also well on mobile.

 

Can someone solve me the riddle?

 

Thanks for any suggestions,
Mat

See the Pen bEOzaz by natewiley (@natewiley) on CodePen

Link to comment
Share on other sites

Have you tried breaking the animation down into simple parts to see where the issue is stemming from? You're getting a bunch of console warnings with the floating hearts. I'd try disabling that to see if the issue is with your drawSVG or your hearts. My hunch is that its due to animating `attr: { x: x, y: y },` instead of using a transform `x:x` (which can be passed to the GPU). If you turn chrome's paint flashing borders on there's a lot of random extra paints on these hearts..

  • Like 2
Link to comment
Share on other sites

I have also heard that <use> can be very slow for certain browsers to render. It looks like you're nesting <svg> elements and animating "x" and "y" attributes and using <use>, all of which are pretty bad for performance. I'd recommend animating transforms on those hearts, and avoid nesting them inside the <svg>. Instead, wrap each one in a <div> and animate the transforms of that so that the browser can GPU-accelerate the effect (most browsers cannot GPU-accelerate SVG sub-elements). 

  • Like 3
Link to comment
Share on other sites

Hello guys first of all thanks for your answers!


I have tried to do these steps and nothing helps.

Even if i remove 50% of the elements on the animation it will not work.

If you have a solution please host this and send me link so i can see a hosted version which works and is not on codepen.

Important is that you test the link of mine, because on codepen it always worked well but not in the hosted version of the same.

It is weird that the same code works on codepen well but not on my server. Why has different host an impact on it?

Link to comment
Share on other sites

I tried this on Android 8 and Chrome 72 and it certainly was bogged down. I removed all the elements except one path and it was still bogged down. I tried some pages on my own site with DrawSVG — no problems at all. The difference? No gradient background.

 

I switched your project to a solid color background and it was smooth on Android/Chrome. I'm not sure why this works on CodePen with a gradient background. Maybe because it's in an iframe? I really don't know. What I know for sure is Android Chome rolls over and plays dead with a gradient background on the body.

 

I'd still follow the above advice about the <use> and nested SVGs, but I think a solid color background should get things moving more smoothly for you on Android Chrome. Happy tweening.

  • Like 1
Link to comment
Share on other sites

I don't think it is because of gradient, because on codepen that works well too on mobile with chrome.
Question is what codepen has different than when one hostes the exported .zip from there and uploads it configured on server.

 

Please if anyone gets it working with all like on codepen send me the link before you remove it.

Link to comment
Share on other sites

That's what I said — with the gradient on CodePen, it works fine on Android/Chrome 72. It's weird. Maybe because of the iframe? I don't know. The tests I performed on my own server were horribly slow until I removed the gradient background. I still see the gradient background on your site. Please try setting it to plain red, black or whatever you like and try your device again.

 

In any case, I really don't think this has anything to do with GSAP.

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