MPIIIMan

Thank you for your help. Was the push I needed in the right direction.

First of all, thank you very much for the detailed reply. I appreciate the proper approach laid out. I am trying to figure out how to not have it completely zoom in on the "Segment" though. I hoped adding some width / height to the values being passed would accomplish the task, but that messes things up. There is also a weird glitch that happens when you click on some of the names. This is easy to repeat by changing the view on CodePen to Full Page View and then clicking on Guillaume Fournier and Pierre Fournier. You can see it in the attached screenshot. Any idea how that can be fixed? I initially had problems like this when using D3, but to solve it I extended the main rectangular background to be quite a ways outside of the viewBox like so: <rect x="-2500px" y="-1250px" width="7000" height="3500"/>

Hello, I've recently been changing my code over from using D3 to GSAP as the performance is way better. I've read through many forum posts finding examples and have worked my way through modifying my code to work with GSAP. One thing I just can't figure out...... I have a family tree in SVG format. When you click on a name in the tree I modify the viewBox to zoom in. Clicking on the outer lying circles/arches makes the SVG zoom back to the original state. I am trying to figure how to do the following: Once zoomed in on a name, and you click on another name I just want the viewBox to pan over and center on that name. My code is of course zooming again. I attempted to go through the code and set some flags to detect if zoomed in, and if not don't change the scale. But I just can't seem to get it working properly. Don't want to post that code as it was a mess. Any tips would be much appreciated. Code pen included.