iotron Posted July 23, 2022 Share Posted July 23, 2022 Hi, the animation is running a little sluggish on some devices, probably due to a large number of paths. Any ideas on how to optimize the SVG or the animation for better performance without compromising much on the design? Thank you. See the Pen abYwjrY by iotronlab (@iotronlab) on CodePen 1 Link to comment Share on other sites More sharing options...
SteveS Posted July 23, 2022 Share Posted July 23, 2022 That is a LOT of paths. Interested to see if someone has a good answer for you. Link to comment Share on other sites More sharing options...
GreenSock Posted July 23, 2022 Share Posted July 23, 2022 Oh my goodness. Yeah, that's asking a LOT of the browser to render. Yikes. I would definitely recommend simplifying that quite a bit. You'd need to do so in your authoring software. You can try SVG OMG, but I'm not sure how effective it will be: https://jakearchibald.github.io/svgomg/ It seems to me like you'd need to be intentional about going in and eliminating a bunch of those paths. There's no way a software package can effectively automate that and know exactly which paths to completely delete, you know? 1 Link to comment Share on other sites More sharing options...
iotron Posted July 24, 2022 Author Share Posted July 24, 2022 20 hours ago, GreenSock said: Oh my goodness. Yeah, that's asking a LOT of the browser to render. Yikes. I would definitely recommend simplifying that quite a bit. You'd need to do so in your authoring software. You can try SVG OMG, but I'm not sure how effective it will be: https://jakearchibald.github.io/svgomg/ It seems to me like you'd need to be intentional about going in and eliminating a bunch of those paths. There's no way a software package can effectively automate that and know exactly which paths to completely delete, you know? Sorry, my bad. I forgot to mention that the SVG is already optimized from SVGOMG. I am working on the SVG in Adobe illustrator. I have optimized the number of paths but it's still a lot because of the intricate design. So, there are a number of options I am thinking of trying, on which I would like your opinions. 1. Merge some of the paths into compound paths, lessening the number of paths. 2. Replace drawSVG with less resource heavy animations like opacity/autoAlpha toggle. Thanks a lot for the help. ❤️ Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 25, 2022 Solution Share Posted July 25, 2022 If it were me, I would definitely eliminate a bunch of those paths (particularly where they're all bunched together anyway). But if you must keep the artwork as-is, then yes I think it'd be cheaper for the browser to animate opacity rather than drawing the line with drawSVG. 1 Link to comment Share on other sites More sharing options...
iDad5 Posted July 25, 2022 Share Posted July 25, 2022 I really like what you are doing, being an architect by education I really like that blue-print style. I do remember well the times, when we hat to reduce plan details because even or the state of the art sgi workstation wouldn't be able to handle them... While the animation is impressing, I had to watch it multiple times before having understood some of what is going on, my suggestion would be to think in layers, maybe work with a png background that is intentionally slightly blurred and use svg only for the crisp background? With a little masking and maybe even subtle parallax like movement overlay gradients etc, you can do a lot of magic too... Just my two cents... 2 Link to comment Share on other sites More sharing options...
iotron Posted July 26, 2022 Author Share Posted July 26, 2022 17 hours ago, iDad5 said: I really like what you are doing, being an architect by education I really like that blue-print style. I do remember well the times, when we hat to reduce plan details because even or the state of the art sgi workstation wouldn't be able to handle them... While the animation is impressing, I had to watch it multiple times before having understood some of what is going on, my suggestion would be to think in layers, maybe work with a png background that is intentionally slightly blurred and use svg only for the crisp background? With a little masking and maybe even subtle parallax like movement overlay gradients etc, you can do a lot of magic too... Just my two cents... Thank you so much for the ideas. The buildings are the heritage of my city Kolkata, that's why I want to make the animation special. But my experience with animations is limited that's why "With a little masking and maybe even subtle parallax like movement overlay gradients etc" is out of my scope of imagination. Perhaps you can point me to any codepen with a similar effect so that I can try to figure out how to implement it. Thanks a lot. Your two cents are greater than my animation skillset. ❤️ 1 Link to comment Share on other sites More sharing options...
iDad5 Posted July 26, 2022 Share Posted July 26, 2022 thank you @iotron that's seems entirely to much of a praise, your question made my ponder about doing some examples, and I already looked around for some line arte to use a an example. I would like to do it in way that's is well explained, and that might take a while. 1 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