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 !
