Svg animate multiple paths

[mateomm22]

I'm setting a scroll based animation for an element that looks like a mesh, I have a page where I need to add 3 meshes like this one.

The problem I'm seeing is that animating all these elements at once seems to be too heavy and the scroll feels buggy and slow.

What should be the best approach to animate all these paths?

See the Pen zYwRmxM by mateomm22 (@mateomm22) on CodePen

[GreenSock]

In 99.9%+ of cases, performance issues have absolutely nothing to do with GSAP - it's almost always the browser trying to render graphics that's the bottleneck. SVGs are inherently tough on the CPU because it has to fabricate all those pixels dynamically on each tick. 

 

A few things you could try: 

1. Don't use strokes if possible - use filled shapes instead. It can still look the same - in your editor, just have it convert the strokes into outlines. Strokes are just more CPU-heavy to render.  
2. Since most browsers can't GPU-accelerate SVG rendering yet but they CAN apply some GPU-accelerated graphics rendering to the root <svg> element itself, try separating out each of your paths into its own <svg> and stack them. Then, set will-change: transform on the <svg> elements and animate those. Just beware that if you scale them up beyond 1, they'll likely get blurry due to rasterization & caching that the browser does to things with will-change applied. 
3. Don't use SVG at all - use a set of .png images with transparency
4. Maybe try converting this to <canvas> instead. PixiJS may help. It can tap into WebGL for very fast rendering. 

I hope something in there proves to be helpful. 

[mateomm22]

Thanks for the help, I'll try some of these.