dimos Posted July 21, 2021 Share Posted July 21, 2021 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. Link to comment Share on other sites More sharing options...
Cassie Posted July 21, 2021 Share Posted July 21, 2021 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now