Map : Pan and Zoom to element

[Feeka.studio]

Hello everyone !

I'm having some trouble with a custom map I need to make. When clicking on an item I want to move the "map" so that the item moves to the center and zoom on that item. I made a quick reproduction in the CodePen. Clicking on a green block pans & zooms to it.  Clicking on the red one unzooms. The best way to test the problem is to grab the "map" div to position a green block near an edge and then click on it, it wont pan exactly to the center.
 

To pan to that item, I compute the difference between that item's boundingRect's center and the screen's center and move the map accordingly. It works without issues. But, of course, when I couple that with the scaling, the delta computed initially gets more and more incorrect over time as the map gets scaled up (the distance in pixels between point A and B at scale 1 is lower (half of?) than the distance at scale 2).

I tried multiplying the delta by the zoom factor, but it doesn't work either since we're easing to the scale and not setting it straight away (and thus it will move too much).

My gut says I should use some kind of function for X,Y that multiplies delta*animationProgress*currentScale at every frame or something of the sort but I cannot put my finger exactly on how to do it. Or maybe changing the transform origin of the map everytime would be enough ? How can I project my mouse position on the map ? (I'll look into it in the meantime, shouldn't be very hard) Any help would be much appreciated !

Sorry in advance if I'm not clear, I'm not a GSAP expert (yet) !  And thanks for the great tools !

See the Pen porwWKo by martinvandersteen (@martinvandersteen) on CodePen

[OSUblake]

Welcome to the forums @Feeka.studio

 

Zooming into a certain point can be rather involved as scale isn't linear.

 

Here's a good example to learn from.

 

See the Pen zYdzPaj by GreenSock (@GreenSock) on CodePen

 

And some older demos that actually animate the zoom.

 

See the Pen pedmMW by osublake (@osublake) on CodePen

 

See the Pen MErWRb by osublake (@osublake) on CodePen

 

[Feeka.studio]

Thanks a lot @OSUblake for your suggestions ! 

I used them as an inspiration and came up with a newer version using onUpdate. It works quite well but I'm getting "Maximum call stack size exceeded" errors. Maybe someone has an idea on how to perfect this a bit in order to avoid getting this error ? 

See the Pen QWMgayq by martinvandersteen (@martinvandersteen) on CodePen

 

[OSUblake]

4 minutes ago, Feeka.studio said:

"Maximum call stack size exceeded" errors.

 

You got recursive call that will never end. It's going to keep creating animations until it runs out of memory.

 

 

 

[Feeka.studio]

Yeah I get why it happens but I'm not really sure how I could go around this without recursion ! 

[OSUblake]

That's why I manually update scale, x, and y instead of using an animation in some of those demos.

 

You could also try to do a .fromTo animation. That's essentially what the last demo I posted is doing. It's manipulating the SVG viewBox, which is basically the same thing as change the scale as position.

 

 

[OSUblake]

2 hours ago, OSUblake said:

Zooming into a certain point can be rather involved as scale isn't linear.

 

I'll just post this as a reference for anyone else that is confused by that. It's when I had my AHA moment about why zooming and panning was so difficult. It should be easier to calculate by using the ExpoScaleEase in theory as that should eliminate the drift.

 

 

[Feeka.studio]

I think I understood how I could do it based on your last example. I'll smash my brain on it a bit more and I should be able to figure it out, thanks again for your help !!