Need Help with Zoom In / Zoom Out / Pan Programmatically

[MPIIIMan]

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.

 

See the Pen poypLPB by mpiiiman (@mpiiiman) on CodePen

[ZachSaucier]

Hey MPIIIMan and welcome to the GreenSock forums. Your issues are purely logical.

 

For one, you almost always want to avoid putting click event listeners inside of other click event listeners. Doing so will add a new even listener every time a segment is clicked, which is obviously not what you want. If you need the values to change more dynamically it's fine to switch out the animation for a new one with new values but the old event listener should remain untouched.

 

Second (and related to your question) is the issue related to your zoom function. Currently it uses the current viewBox  and only zooms in. That's no good. I recommend a completely different approach: at the start generate viewBox values for each segment and then animate the viewBox to those values when a segment is clicked. Not only will this save you computation when you actually need to animate but it will also give you more freedom in how you generate those values (for example currently if you click on a name in the outer ring then it only zooms in as far as it does for one in the innermost ring, which isn't very helpful). I talk more extensively about this sort of technique in my article about animating efficiently.

 

Side notes: 

• I recommend using the GSAP 3 more condensed syntax. 
• You had a couple of commas where there should be semicolons instead.
• I'd probably use the entire page as a click selector for the "back to default" animation".

Altogether I'd do it more along the lines of this:

See the Pen wvGpZMb?editors=0010 by GreenSock (@GreenSock) on CodePen

[MPIIIMan]

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"/>

 

 

[ZachSaucier]

Hey MPIIIMan. As much as I'd like to help, debugging things like that outside of GSAP are out of scope for this forum. If you have a question about how to use GSAP please ask and we'll do our best to help. Otherwise, you're welcome to post in our jobs and freelance forum or potentially hire us for premium debugging. 

 

I hope you're able to figure it out soon!

[Visual-Q]

Hey MP,

 

I was playing with this earlier, It doesn't work perfectly but maybe it will help, btw if you meant the cropping of the image leaving excessive orange setting svg:not(:root) {overflow:visible;} seemed to prevent that. Don't ask for an explanation though I have no idea what it does I just examined the item in the inspector and overrode the default user agent setting.

 

i think was able to get closer to what you want so you can work it out from here.

 

See the Pen KKzQVxM by Visual-Q (@Visual-Q) on CodePen

 

[MPIIIMan]

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