Xenex122 Posted June 8, 2022 Share Posted June 8, 2022 My problem here is I don't know how can I make the arrow follow as the direction of mouse as I passed it through my root variable. Any idea how can I achieve this? It just keeps rotating and rotating when I'm trying to move it around the screen. Example if it goes like 30deg of the direction of the mouse then it the arrow should be there also. since it has 360deg I don't know how to do it and pass it in global variable. See the Pen XWZPOoY by myth-vince (@myth-vince) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 8, 2022 Solution Share Posted June 8, 2022 Perhaps you're looking for something like this? See the Pen yLvxwOj?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Xenex122 Posted June 8, 2022 Author Share Posted June 8, 2022 oh I see thanks sir..I never thought this is the solution. Link to comment Share on other sites More sharing options...
Xenex122 Posted June 8, 2022 Author Share Posted June 8, 2022 Can I ask if the quickTo is somehow related to mousevent? because when I try to change it into .to() it doesn't move. Link to comment Share on other sites More sharing options...
GreenSock Posted June 8, 2022 Share Posted June 8, 2022 39 minutes ago, Xenex122 said: Can I ask if the quickTo is somehow related to mousevent? because when I try to change it into .to() it doesn't move. Sorry, I don't understand your question. Please read the docs if you want to understand in more detail what .quickTo() is: https://greensock.com/docs/v3/GSAP/gsap.quickTo() It is **NOT** a replacement for gsap.to(). Very different purposes and method signature. Why are you trying to change it to to() in the first place? Link to comment Share on other sites More sharing options...
Xenex122 Posted June 8, 2022 Author Share Posted June 8, 2022 hahaha.. well just might to do some new trick in it.. Link to comment Share on other sites More sharing options...
Xenex122 Posted June 8, 2022 Author Share Posted June 8, 2022 1 hour ago, GreenSock said: Sorry, I don't understand your question. Please read the docs if you want to understand in more detail what .quickTo() is: https://greensock.com/docs/v3/GSAP/gsap.quickTo() It is **NOT** a replacement for gsap.to(). Very different purposes and method signature. Why are you trying to change it to to() in the first place? From the earlier question sir.. How do I do it if its inside the box or something? I have a new codepen here that can you make clarify on it. See the Pen xxYaNGp by myth-vince (@myth-vince) on CodePen As you see I change a bit the "x,y" with a var rect = box.getBoundingClientRect() const x_ = e.clientX - rect.x; const y_ = e.clientY - rect.y; let yDif = y_, xDif = x_ because the arrow is not following the mouse direction in your earlier code cause it only works in a parentDiv...but my function here is almostly work but there is something wrong where it doesn't fully rotate on the top left side of the arrow. Can you notice my mistake her sir? I believe the missing thing here must be something in if (Math.abs(xDif) > 3 || Math.abs(yDif) > 3) { console.log(xDif,yDif) x = x_; y = y_; // This one will rotate the '.rotate' while the cursor is moving // _short is used for make rotation is n right rotation. rotateTween.vars.rotation = (Math.atan2(yDif, xDif) * RAD2DEG - 40) + "_short"; // This one will restart the method rotation so it can rotate again once the mouse // is move rotateTween.invalidate().restart(); } Link to comment Share on other sites More sharing options...
GreenSock Posted June 8, 2022 Share Posted June 8, 2022 I read your question a few times and I'm totally lost, sorry. I don't understand what you're asking. You changed several things in the code I gave you and I don't know why. It looks like you're now setting the x and y position to equal the CHANGE in x/y coordinates which looks very strange to me. Please keep in mind that we normally don't provide free general logic consulting services like this. Please read the forum guidelines. I created that demo for you with all new code because I was curious and wanted to help but I'm afraid we just don't have the resources to continue digging into logic questions and delivering custom solutions. As always, we're happy to answer any GSAP-specific questions, though. 1 Link to comment Share on other sites More sharing options...
Xenex122 Posted June 8, 2022 Author Share Posted June 8, 2022 Oh nevermind I got it sorry let yDif = e.clientY - rect.height, xDif = e.clientX - rect.width; I just have to something like this. 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