I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function.
I have decided to make zooming function via changing Transform's "scale" and "translate" properties.
Example is here: https://codepen.io/Creedplay/pen/oLRPjY
Just check JS lines, and for test click on red object.
I have used TweenMax library for transition change of up mentioned properties.
My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it.
Can anyone explain why it does this? and help me to fix?
I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675
Thanks in advance.