SVG code that's animated loads slow on IE,Edge

[nino-la]

Hi there,

 

I have 2 SVG graphics that are over 1000 lines of code. I'm animating them with GSAP. However, on IE and Edge it takes quite a bit to load all the html. Are there other ways to render SVG so that it can still be animated with GSAP? I know if i have img tag then GSAP won't work. Any suggestions? 

[GreenSock]

Hm, I don't really understand why certain browsers would load things more slowly but perhaps it's the parsing/rendering that takes them longer. It won't matter how you load the SVG (inline or as an img), I think you'll have exactly the same problem either way. Have you tried running your SVG through an optimizer? 

 

I'd definitely recommend loading SVG inline if at all possible because not only will it give you the most control and flexibility (GSAP can access all the nodes), but it's one less request from the server (improving latency). 

 

If you're still having trouble, I'd love to see a demo of your project. If there's any way you can provide a codepen or jsfiddle, it'd be super helpful for troubleshooting. I wonder if there's something else at play with IE/Edge that's unrelated to inline SVG. 

 

 

[nino-la]

Thanks for your replay.

I also wanted to ask, since i'm experiencing some choppiness what are some gotchas on how to improve performance when using gsap?

Is staggerTo/From better then simple to/from when you have multiple tweens? does force3D: true/false do anything for performance? I also read to use autoalpha instead of opacity. Is there anything else?

[PointC]

If you're experiencing choppiness in your animation it's highly unlikely to be GSAP related. GSAP is a tweening engine that animates values over time. All the rendering is done by the browser. Odds are good that you're either animating something quite large or a bunch of elements at the same time. Browsers have limits and when SVGs starting bogging down, it may be time to look towards a canvas solution. There are many threads around the forum related to canvas if that's a route you want to consider.

 

Happy tweening.