Jump to content


Zooming elements in div centered to current mouse location

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to make an interactive map with the draggable plugin that zooms in and out. I have made my image an SVG so it can scale well, and my location dots are css. But i have been running into two issues. 

1. Since my map is longer than the view port, i can't seem to see the bottom of the map. it keeps scrolling back to the middle if i drag upwards. 

2. All the zooming solutions I have found have only been for images. I need to zoom all the elements in the entire div. 


I started to create my own zoom, which zooms the whole div and the elements in side it. But this presents a couple of issues. First, it zooms in and out at the same spot, I would like it to zoom into the current mouse location. And second if I zoom out at the edge, the div goes out of the visible boundaries so i can't drag it around. 


As per your requests I created a codepen,

See the Pen LktfB by jermbo (@jermbo) on CodePen

, and I realize this is a very specific situation. Any direction would be greatly appreciated.  I just need a push in the right direction and I got the rest of the map functionality. 


Thanks in advance!!


*Plugin Request : Zoomable. If this were a greensock plugin like Draggable I would be the happiest developer in the world!




Link to comment
Share on other sites

Hello  jermbo, and Welcome to the GreenSock Forums!


Here is a codepen example modified to drag and view the bottom:


See the Pen EGFrJ by jonathan (@jonathan) on CodePen


You just need to add the CSS property position: absolute on your .map class, so it takes the element out of the flow of the document:

  /*background: url("images/map-bg.jpg") no-repeat;*/
  width: 1200px;
  height: 1300px;

  /* add this css property */

Does that help?

  • Like 2
Link to comment
Share on other sites

Hey Jonathan,

First thank you for your quick response! Second, w....t....f...! I was up all night last night trying to figure this out and it was, was a stupid position!! The funny part about that is I took it out in earlier revisions of the trial.. and didn't think to add it back in. *FacePalm*


Hello rhernando, thanks! I had already had in mind what I was going to do, but this is definitely making me think about it in a different way. 

Link to comment
Share on other sites

Best rule of thumb is if you are moving (translating), scaling, or rotating.. its best to set the position of the element to absolute so it can be moved outside of its normal position in the document.


Checkout the Draggable Docs:




Taken from the Draggable Docs:


In order to make things moveable via their "top" and "left" properties, you must make sure that the elements have their position css property set to either "relative" or "absolute".



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.