Jump to content


Getting responsive, zoomable, draggable SVG to move to a particular set of coordinates

Recommended Posts

Hallo! So this is a minimal version of the thing I'm actually working on, but essentially it's a map of a campus. Dragging works great, and zooming works fine; but what I'm trying to achieve is, whenever you click on a 'building' (read: brightly-coloured block), it moves to the left side of the viewport, vertically centred. I'm using data-attributes on my buildings for this, and I thought I had it, but:


a) it doesn't account for different viewport sizes (so it's not vertically centred); and
2) once you zoom in, that positioning all goes out the window, and clicking on a building doesn't put it anywhere near the intended place.

I just realised I might be able to get away with resetting the zoom level to 1 whenever someone clicks on a building (maybe?), so at least the x co-ords would (probably?) still work; but the vertical centring is a bust no matter what.

Maths is not my strong suit, so any ideas on how to tackle this would be gratefully received 😬

See the Pen WNyvKvY by indextwo (@indextwo) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @indextwo. And thanks for being a Club GreenSock member!


Yeah, that math on stuff like that can quickly become mind-bending.


These may be helpful for you: 

If you need help implementing those, you're welcome to post in the "Jobs & Freelance" forum or contact us for paid assistance. Of course you can post GSAP-specific questions here in these forums - we just don't have the bandwidth to do the work for you for free, that's all.


Good luck with the project! 

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.