Jump to content
Search Community

Draggable large image with small map preview

eviljeff test
Moderator Tag

Recommended Posts

Hi, I'm trying to create a mini map of a large draggable image to show users where they are on the image. I've used part of the code from this topic 

The difference from it is that I'm using gsap3, so I have changed 

 

$draggable[0]._gsTransform;

to 

posX = gsap.getProperty('.hub', "x");
posY = gsap.getProperty('.hub', "y");

 

On load, my image starts  not perfectly centred and scaled at 0.9. Ideally the mini map marker should start at the same position but that is not the case, plus when dragging the marker should move accordingly following the position of the large background image.

If I comment out the last line resizeHub(); the coordinates seem to be working correctly.

 

Can someone please help me resolve this issue? I can't figure out how to fix my code.

 

Thanks

See the Pen PoRqojY by jeffceriello (@jeffceriello) on CodePen

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my requirements: ___...please fix my project for me" requests. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just isolate it as much as possible in a minimal demo and post back here - we'd be happy to take a look as long as the question is very focused on GSAP and not more custom logic/consulting. 

Link to comment
Share on other sites

Okay, I couldn't help myself - usually we don't do this for people but I was curious about this so I authored a whole new version from scratch: 

 

See the Pen LYdRQra?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's less than half the code and it also lets you drag the small white rectangle and it's reflected in the big image too. And it centers things initially per your request. Oh, and of course it does inertia so you can flick. I dumped the jQuery dependency as well. Fully responsive. 

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

Hi Jack, I cannot thank you enough for your time and effort. Your version is so clean and tidy, it's just beautiful to look at.

 

I didn't know you could get the draggable coordinates by just doing

bigdraggable.x

or

bigdraggable.minX

Dragging the small white rectangle is also a great plus, I'm seriously impressed. I've really learned a lot from your code, thank you a million times!

  • Like 2
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.
×
×
  • Create New...