eviljeff Posted November 25, 2021 Share Posted November 25, 2021 Hi there, Is there a way to improve the performance on an SVG with hundreds of paths animating at the same time? If that's not possible, a solution to animate less paths would be good, but I've not found a solution to that yet unfortunately. For example to only animate the paths closer to the mouse cursor. Any help with this would be greatly appreciated. Thanks See the Pen zYdgBYZ by jeffceriello (@jeffceriello) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 26, 2021 Share Posted November 26, 2021 That's asking a LOT of the browser to render all of that dynamically as vectors. I'm not at all surprised that performance is suffering. And to be clear, it has nothing to do with GSAP. I'd bet that less than 1% of the load is GSAP - the rest of graphics rendering. Also, I'd use overwrite: true instead of "auto" because it's cheaper. There's no need to do a pupil.forEach() to create a bunch of gsap.to() calls - just do a single gsap.to(pupil...) call (you can pass in multiple elements as the targets (Array). I'd recommend that you consider switching to something like PixiJS instead of using SVG. It'll render way faster but it is more work to set up. Link to comment Share on other sites More sharing options...
eviljeff Posted November 26, 2021 Author Share Posted November 26, 2021 Hi Jack, thank you for your reply. From your experience, would implementing something like this See the Pen KRJmey by biblos (@biblos) on CodePen or this See the Pen RwGGmVv by mikeK (@mikeK) on CodePen improve performance or would it still be a performance killer on that specific SVG? I'm not really good with 2d renderings and math operations so recreating the SVG on a canvas would be an impossible task for me. Thank you Link to comment Share on other sites More sharing options...
OSUblake Posted November 26, 2021 Share Posted November 26, 2021 3 hours ago, eviljeff said: improve performance or would it still be a performance killer on that specific SVG? SVG is the slowest medium to use for animations. SVG < HTML < Canvas < WebGl. 3 hours ago, eviljeff said: I'm not really good with 2d renderings and math operations so recreating the SVG on a canvas would be an impossible task for me. You're already doing the math, and SVG is a 2d rendering, so it's not going to be a big jump. Check out PixiJS. It's pretty ease to use and is very easy to animate with GSAP. https://pixijs.com/ 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