AsKadir Posted May 29, 2020 Share Posted May 29, 2020 Hi, all! I found a cool follow mouse effect here https://www.wolfwhale.com/contact/, When you move mouse diagonally the circle starts follow with angle. I mean the way how the circle follows the cursor is not straight, it is parabola. How can I achieve this effect? Can you give me an advice in which direction should I go, please? Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 Hey Aslan. This has been asked many times in the forums already (just search for "mouse follow"). Here's a basic demo of an up-to-date way to do it. See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
AsKadir Posted May 29, 2020 Author Share Posted May 29, 2020 @ZachSaucier Hey, Zach! No no, there is another follow, When you move cursor from a to b diagonally the circle in your example moves straight like a green line, but here https://www.wolfwhale.com/contact/ the circle moves like blue line. Sorry for this drawing. Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 2 minutes ago, AslanGoi said: When you move cursor from a to b diagonally the circle in your example moves straight like a green line, That's a bit silly if you ask me. But the approach is basically the same. You just modify the functions being used. 1 Link to comment Share on other sites More sharing options...
AsKadir Posted May 29, 2020 Author Share Posted May 29, 2020 21 minutes ago, ZachSaucier said: That's a bit silly if you ask me. But the approach is basically the same. You just modify the functions being used. Thanks, I will try. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted May 29, 2020 Share Posted May 29, 2020 One simple approach would be to set a seperate x & y speed in the example above from Zach. Then play around with each speed number until you get the desired effect. If that does not suffice then you would need to come up with further logic if required. var speedX = 0.1; var speedY = 0.3; // pos.x += (mouse.x - pos.x) * speedX; pos.y += (mouse.y - pos.y) * speedY; 3 1 Link to comment Share on other sites More sharing options...
AsKadir Posted May 29, 2020 Author Share Posted May 29, 2020 5 minutes ago, Shrug ¯\_(ツ)_/¯ said: One simple approach would be to set a seperate x & y speed in the example above from Zach. Then play around with each speed number until you get the desired effect. If that does not suffice then you would need to come up with further logic if required. var speedX = 0.1; var speedY = 0.3; // pos.x += (mouse.x - pos.x) * speedX; pos.y += (mouse.y - pos.y) * speedY; How did I not guess? That's exactly what I need! Thanks a lot! @Shrug ¯\_(ツ)_/¯ Link to comment Share on other sites More sharing options...
MishaA Posted September 21, 2022 Share Posted September 21, 2022 Hi guys! How could you reset this interaction to the default position after the "mousemove" left the interactive <div><div/> section? Link to comment Share on other sites More sharing options...
GreenSock Posted September 22, 2022 Share Posted September 22, 2022 Just listen for a "mouseleave" event and do a simple gsap.to(...) to wherever you want. 👍 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