I'm somewhat new to web development in general so especially new to GSAP and am attempting to use it to zoom in (scale) and out on a somewhat complex inline svg. Have been poking around the forums about scaling svg and svg performance but can't really come to a conclusion on what the best way to go forward is so I was looking for a bit of advice before going any further.
The codepen provided just has the different ways I've been attempting to zoom in on a specific part of the svg. In the codepen I have zooming in using css animation, gsap animation, gsap animation on a parent div, and lastly gsap animation using the viewbox instead of scale.
I was jut wondering what the reason behind the performance differences where, mainly between css and using gsap when scaling. Currently I'm getting much better performance using css but would like to transition away from css animations as its makes animation timing more difficult.
Besides the codepen, I have the beginning of my current attempt up at https://gmanb94.github.io/portfolio/ which is currently using the CSS route.
Right now, the zoom animations I'm focusing on are working ok on chrome with slight stutter every now and again, badly on firefox, but very well on safari for whatever reason.
I also understand that I probably need to do more to optimize/prepare the svg I'm using (as you can assume new to dealing with the svg format as well) but so far my attempts which have included optimizing the svg online and splitting out the the parts I want to animate and putting the rest into an image tag haven't shown a notable increase in performance. If going the pixijs route is recommended I'd understand as I've seen that come up quite a bit on this topic but would rather make sure there ins't something far simpler I'm missing, especially since I'm getting the performance I'm looking for on safari.
Any advice in what direction to head in would be greatly appreciated.
