Choppy iPhone Animations with SVG filters

[zachschnackel]

Hi all,

In the referenced CodePen, the "social blob" animation on desktop; using `feGaussianBlur` and `feColorMatrix`, is smooth and works as intended, but on mobile devices the shapes are cut-off and very choppy. Is there something I'm missing with how GSAP is interpreting these values? Thanks so much for any help!

See the Pen jbjPEj by zslabs (@zslabs) on CodePen

[GreenSock]

There's really nothing special that GSAP is doing to those values at all, and the biggest bottleneck (BY FAR) is the browser's graphics rendering which is completely unrelated to GSAP. In other words, it might take 0.01% of the CPU load for GSAP to calculate the new (tweened) values, and 99.99% for the browser to then render those visually to the screen. So even if GSAP was 1000x faster, you'd never notice it because it accounts for so small a portion of the overall load. The fact is that SVG filters are very processor-intensive and most mobile devices just have very weak processors. I wish I had a magic bullet for you. I'm sure this isn't the answer you were hoping for

[zachschnackel]

Hey Jack,

Really appreciate the reply. I completely get your above point; what I'm trying to figure out is why something like 

See the Pen wKReBX by chrisgannon (@chrisgannon) on CodePen

which uses the same type of filters works very well on my mobile device, even though there's a lot more elements on the page. Could this have something to do with applying the filter with CSS compared to using all SVG elements?

[GreenSock]

I'm not much of an expert on the performance characteristics of CSS vs SVG filters, sorry. My guess is that yes, in this case CSS filters are performing worse but I'm not exactly sure why (that's unrelated to GSAP). 

[zachschnackel]

Gotcha, I'll go down that route and see where I end up. Thanks Jack!

[zachschnackel]

Hey Jack,

Believe that was it. I recreated that animation using all SVGs and it worked great 

See the Pen wKVzYy by zslabs (@zslabs) on CodePen

 

Thanks for the tip!