Performance concerns with multiple morphSVG tweens?

[dimos]

Hi all,

 

First of all, I haven't noticed any performance issues (none were reported by my users yet - although if there are, I don't think they would necessarily know where it's coming from). This is just a concern of mine.

 

On component mount I am creating several tweens, in extreme cases as many as 18. They all morph one path to another path using morphSVG like so:

const tweenOne = gsap.to("#idOne", {
  ...animationSettings,
  morphSVG: { shape: "#idTwo" },
});

 On component unmount I kill them with this:

tweenOne.kill();
tweenTwo.kill();
// etc..

 

Has anyone done anything similar and have you noticed any performance issues? Was there any testing done by the GSAP team with cases like this?

 

The gif attached on the following post illustrates the end result for my users:

 

I am basically using morphSVG for frame animations. It allows me to create smooth looking animations with only 2 different frames which is really cool.

[Cassie]

There's a lot more calculations involved with morphing than something like an opacity fade or transform - It also won't be hardware accelerated. That being said, if you haven't noticed any jankiness or performance issues - you're probably ok.

Animation performance issues are very visible!