The arrow should follow the mouse direction in container by rotating.

[Xenex122]

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

[GreenSock]

Perhaps you're looking for something like this?

See the Pen yLvxwOj?editors=1010 by GreenSock (@GreenSock) on CodePen

[Xenex122]

oh I see thanks sir..I never thought this is the solution.

[Xenex122]

Can I ask if the quickTo is somehow related to mousevent? because when I try to change it into .to() it doesn't move.

[GreenSock]

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? 

[Xenex122]

hahaha.. well just might to do some new trick in it..

[Xenex122]

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();
            }

 

[GreenSock]

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. 

[Xenex122]

Oh nevermind I got it sorry 
 

            let yDif = e.clientY - rect.height,
                xDif = e.clientX - rect.width; 
I just have to something like this.