[Zoom map region to the center of the map container]

14 hours ago, ZachSaucier said:

That makes it even easier because you can set its scale at the start and not have to worry about it later  I moved its offset to the parent <g> and changed the scale there as well (I approximated, you can be more precise). I also put .visible-on-zoom { visibility: hidden; } in your CSS and hotspot_tl.to(".visible-on-zoom", { autoAlpha: 1}); in your hotspot click (which will make all of them appear no matter which hotspot it clicked, but I assume you know how to fix that). 

 

 

 

This is exactly what I wanted. Thank you very much @ZachSaucier. You are a genius. I have no words to thank you enough.

[Zoom map region to the center of the map container]

16 hours ago, ZachSaucier said:

Given the yellow is a child of the element being scaled, it has to be scaled.

 

To fix this you could either 1) move it outside of the element being scaled and manually move it to where it needs to be 2) counter the scale change by reducing the scale by the appropriate amount. The second of those two options is probably the easiest in this case. 

Actually I missed something. I don't want to the yellow marker appear initially. I want it to be appear after the scaling of red region finished. I can manage it. Yellow marker shows initially in codepen for reference. As second solution , do you mean rescale only the yellow marker to its original size before it appear? Can you explain the second solution little bit more, as I didn't get it clearly. Any example would be better if you can?

[Zoom map region to the center of the map container]

Thanks @ZachSaucier and @GreenSock. I have another problem regarding scaling. Please take a look at the following codepen.

See the Pen VwYYBLz by dush88gs (@dush88gs) on CodePen

When I clicked on the Blue pulsing marker which associate with the Yellow pulsing marker, I want Yellow pulsing marker to remain same size without scaling(zooming) with the Red colored region, but preserving(maintaining) its original position with regards to scaled(zoomed) Red colored region. Does anyone have any ideas for how to achieve this.

[Zoom map region to the center of the map container]

I have created a different codepen for the solution.

See the Pen QWwWXLR by dush88gs (@dush88gs) on CodePen

Again, Thank you very much @ZachSaucier. You saved my day. But there is another small problem. When I click on the pulsing circle for the first time(after refreshing page with clearing cache, this issue can be reproduced), the region shows zoomed once without animating gradually. Can someone help me to solve this issue?

[Zoom map region to the center of the map container]

18 hours ago, ZachSaucier said:

Additionally to what Sahil said, this thread can help you: 

This looks like exactly what I was looking for. If this solves my problem, I'll let you know with the updated codepen because it can help others that have similar problems. Thank you very much @ZachSaucier.

[Zoom map region to the center of the map container]

8 minutes ago, Sahil said:

You need to determine how far object is from center based on SVG's internal coordinate system then animate it. There is a bit of learning curve, you can refer to discussions in these threads,

 

 

 

Also, please avoid tagging anybody in questions as we usually read all the questions.

Thanks @Sahil, I will go through your references. I have removed all the unnecessary taggings.

[Zoom map region to the center of the map container]

Hello Guys,

 

Please find the linked codepen regarding my problem. The problem is when I click on the pulsing markers, I want to zoom the relevant region of this map to the exact center of the green color container. I prefer using jQuery instead of pure javascript. Can anyone point me to the right direction and explain what I'm missing. I'm new to gsap and also don't have much experience in jQuery. I know there are bunch of super heroes. So any help would be highly appreciated. Thanks in advance.

 

See the Pen PowoNbQ by dush88gs (@dush88gs) on CodePen