[Map : Pan and Zoom to element]

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 !!

[Map : Pan and Zoom to element]

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

[Map : Pan and Zoom to element]

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

 

[Map : Pan and Zoom to element]

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