Creedplay

Kk, ty very much!

Thank you very much for your quick and helpful response, Also thanks for CodePen tips, I have already updated my previously provided CodePen (just cleared most of path elements, left only 2, and made changes from your example), I guess my mistake was the missing of that transition properties, At the moment trying to apply that changes to my main project, I am just curious and have another question: How are you determining the "X" and "Y" values (in a result, scaled object should be in the center of bounding box)?

Hello, 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.