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

[indextwo]

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

[GreenSock]

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: 

• https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()
• https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()
• https://greensock.com/docs/v3/Plugins/Flip

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!