eviljeff Posted July 12, 2022 Share Posted July 12, 2022 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 More sharing options...
GSAP Helper Posted July 12, 2022 Share Posted July 12, 2022 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 More sharing options...
GreenSock Posted July 13, 2022 Share Posted July 13, 2022 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? 1 Link to comment Share on other sites More sharing options...
eviljeff Posted July 13, 2022 Author Share Posted July 13, 2022 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! 2 Link to comment Share on other sites More sharing options...
GreenSock Posted July 13, 2022 Share Posted July 13, 2022 Happy to help, @eviljeff! 🙌 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now