cworf

perhaps ill look into it, my animation is not actually using any 3d perspective, and just uses 2d transforms and rotations to emulate 3d. but could be worth learning anyways.

Ok WOW... I was not expecting such an awesome response so quickly! This alone makes me want to switch everything over to GSAP. Even though I was already considering it. Damn. I fully understand what the problem is now. So now I just need to discover a solution, if there is one. First and easiest thing that comes to mind is converting my stroked paths to filled shapes. However I'm intrigued by the png idea but there is no way in hell I'm going to manually render a PNG file for each line given they are each animated dynamically depending on their "elevation". Is there a way to pre-render a separate file for each element before the animation begins? Or do I need to do this myself. Also, I've never used canvas before, but i seem to remember reading somewhere there is some method of "pre-rendering" an animation outside the visible Dom, then playing it back inside a canvas element. Does that ring a bell? Is this perhaps within the capabilities of GSAP? Thanks again for your thoughtful and rapid response, I look forward to being a part of this community.

So, I have been using anime.js for a while with great results, but I ran into low framerate issues with this particular SVG, so I came here in hopes of finding a solution that was more efficient. Im not sure if this is a problem with chrome, as it is SLIGHTLY better looking on firefox. but here I am in hopes that experts can direct me to the proper solution. To see what im talking about, its best to use as large of a screen as possible, I notice a significant difference on a 4k screen vs 1080p screen. and Ideally this animation will work on full screens up to the newest iMac 5k+ screens. again its confusing because if all you do is make the browser window smaller, suddenly the animation performs perfectly, so the fact that I'm animating a 2500 point svg file seems irrelevant. my computer is also well endowed with the latest hardware and lots of RAM so there's no way it cant crunch through a simple thing like this. Im totally stumped as to what to do, I would really like to make this animation work, for reference, the linked pen above only shows one transform (rotateZ) to illustrate that it does not seem to matter how many transform animations I add, the framerate is still the same. the pen below shows you the final animation that I created using anime.JS, which includes multiple axis rotation transforms and color changes. as you can see, there is little difference in framerate from the GSAP rotateZ only. anime.js version ---> https://codepen.io/BluePeaks/full/ZEWbozo Very much looking forward to learning. Thanks!