SaifUllah Posted March 27, 2023 Share Posted March 27, 2023 Hi guys, is it possible to convert that red colored div (background) into the cursor follower like the white one (wherever my cursor is)? white is just an example to show how red div (background) should look after converting from background to custom cursor. See the Pen NWLJvbG by saifullahbutt85 (@saifullahbutt85) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 28, 2023 Share Posted March 28, 2023 The technique used in that CodePen seems rather clunky and not optimized for performance. This is probably a good use case for gsap.quickTo(). See the docs at https://greensock.com/docs/v3/GSAP/gsap.quickTo() Here's a quick demo from the docs: See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen Does that help? Link to comment Share on other sites More sharing options...
SaifUllah Posted March 28, 2023 Author Share Posted March 28, 2023 Hi @GreenSock Thank your for this method, I'll definitely use it. Link to comment Share on other sites More sharing options...
SaifUllah Posted March 28, 2023 Author Share Posted March 28, 2023 This method isn't working fine on Scroll. whenever I scroll down the cursor follower automatically goes far to bottom. You can watch the video below and check the codepen. See the Pen abaxvaB by saifullahbutt85 (@saifullahbutt85) on CodePen Screen Recording 2023-03-29 at 1.36.28 AM.mov Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 28, 2023 Solution Share Posted March 28, 2023 Hi, Yep I see the issue. This seems to work as expected: window.addEventListener("mousemove", e => { xTo(e.clientX); yTo(e.clientY); }); The support for the clientY value seems to be pretty solid, so you shouldn't run into any issues with it: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY#browser_compatibility Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
SaifUllah Posted March 28, 2023 Author Share Posted March 28, 2023 Thanks @Rodrigo it is working perfectly. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 28, 2023 Share Posted March 28, 2023 Yeah, but you should be consistent and use .clientX and .clientY, not a mix of them. Since the element is position: fixed, then just use .clientX/Y. 1 Link to comment Share on other sites More sharing options...
LenaEvans Posted April 18, 2023 Share Posted April 18, 2023 On 3/28/2023 at 8:08 AM, GreenSock said: The technique used in that CodePen seems rather clunky and not optimized for performance. This is probably a good use case for gsap.quickTo(). See the docs at https://greensock.com/docs/v3/GSAP/gsap.quickTo() Here's a quick demo from the docs: Yes, it does. Thank you for helping me out. You made my day By the way, If you are looking for the best essay writers who can write your essay then you can try here In this website you can see many essay samples which help me to write your essay and I also can read the samples here for free. Does that help? Yes, it does. Thank you for helping me out. You made my day 1 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