High CPU/GPU rate with SVG animation using GSAP

[hellodude.it]

Hi,

I have a problem with a loop animation that causes an high CPU/GPU rate with Chome and a jerky effect with Safari.

 

Here's my demo: https://www.dudemag.it/test/.

 

Here's my code:

import React from 'react';
import gsap from 'gsap';

class App extends React.Component {

  componentDidMount() {

    var a = 0;
    var b = 0;

    for (var i = 1; i <= 18; i++) {

      a = i*90;
      b = i*90+360;

      gsap.timeline({ repeat: -1 })
        .set(this['menu_blob_' + i], { rotation: ('-' + a), xPercent: 200, yPercent: 0.01, rotation: a })
        .to(this['menu_blob_' + i], 5, { rotation: ('-' + b), xPercent: 200, yPercent: 0.01, rotation: b, ease: "none" });

    }

  }

  render() {

    return (

      <div>

        <svg className="blob_cont" ref={element => this.blob_cont = element}>

          <image xlinkHref="img/background.png" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
          
          <defs>
            <filter id="gooey" height="130%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
            </filter>
          </defs>
          
          <mask id="mask" x="0" y="0">
            <g style={{ filter: 'url(#gooey)' }}>
              <circle ref={element => this.menu_blob_1 = element} className="blob" cx="10%" cy="10%" r="80" />
              <circle ref={element => this.menu_blob_2 = element} className="blob" cx="50%" cy="10%" r="40" />
              <circle ref={element => this.menu_blob_3 = element} className="blob" cx="17%" cy="15%" r="70" />
              <circle ref={element => this.menu_blob_4 = element} className="blob" cx="90%" cy="20%" r="120" />
              <circle ref={element => this.menu_blob_5 = element} className="blob" cx="30%" cy="25%" r="30" />
              <circle ref={element => this.menu_blob_6 = element} className="blob" cx="50%" cy="60%" r="80" />
              <circle ref={element => this.menu_blob_7 = element} className="blob" cx="70%" cy="90%" r="10" />
              <circle ref={element => this.menu_blob_8 = element} className="blob" cx="90%" cy="60%" r="90" />
              <circle ref={element => this.menu_blob_9 = element} className="blob" cx="30%" cy="90%" r="80" />
              <circle ref={element => this.menu_blob_10 = element} className="blob" cx="10%" cy="10%" r="80" />
              <circle ref={element => this.menu_blob_11 = element} className="blob" cx="50%" cy="10%" r="20" />
              <circle ref={element => this.menu_blob_12 = element} className="blob" cx="17%" cy="15%" r="70" />
              <circle ref={element => this.menu_blob_13 = element} className="blob" cx="40%" cy="20%" r="120" />
              <circle ref={element => this.menu_blob_14 = element} className="blob" cx="30%" cy="25%" r="30" />
              <circle ref={element => this.menu_blob_15 = element} className="blob" cx="80%" cy="60%" r="80" />
              <circle ref={element => this.menu_blob_16 = element} className="blob" cx="17%" cy="10%" r="100" />
              <circle ref={element => this.menu_blob_17 = element} className="blob" cx="40%" cy="60%" r="90" />
              <circle ref={element => this.menu_blob_18 = element} className="blob" cx="10%" cy="50%" r="80" />
            </g>
          </mask>

        </svg>

      </div>
    );

  }

}

export default App;

 

What's the problem? How can i solve this?

[ZachSaucier]

Hey Andrea.

 

12 minutes ago, andrea_pergola said:

What's the problem? How can i solve this?

The problem is you have a filter on top of a mask and are animating that so the processors have to compute complex things every single tick. If you need to have an effect like this, using Canvas instead would likely be a better option.