swatip Posted January 18, 2023 Share Posted January 18, 2023 Hi, I am trying to achieve cursor effect on text. which is first text will have stroke and background transparent. once user hover on text only part of the cursor will show the filled with text color. Something like above code pen but on hover. I have tried multiple things but couldn't find any solution. If you have any reference or solution. it would be really helpful. thanks in advance See the Pen XWXvpBd by PointC (@PointC) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 18, 2023 Share Posted January 18, 2023 @swatip we love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. The below pen updates a shape to follow the mouse and is from the .quickSettter() docs. See the Pen WNNNBpo?editors=0010 by GreenSock (@GreenSock) on CodePen I've copied that logic to your pen and changed the class name. It has a weird offset, but could be a starting point for you to try your hand at a solution. Hope it helps and happy tweening! See the Pen zYLPYpK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
swatip Posted January 18, 2023 Author Share Posted January 18, 2023 This is really helpful. Thanks a lot!! Link to comment Share on other sites More sharing options...
Rodrigo Posted January 18, 2023 Share Posted January 18, 2023 Hi, To complement the example from @mvaneijgen and this particular issue: 1 hour ago, mvaneijgen said: It has a weird offset, but could be a starting point for you to try your hand at a solution This stems from the fact that the mouse follow event listener is set to the window object. The SVG container has an offset from the top of the window so you need to take that into account. Finally the SVG itself has it's own coordinate system given by the values of the viewBox property: <svg id="demo" xmlns="http://www.w3.org/2000/svg" width="2000" height="1000" viewBox="0 0 2000 1000"> </svg> So you have to listen to the mouse move event inside the SVG element and not the window object and find a way to translate the value from the mouse event into the coordinates system in the SVG element based on the screen size and the viewbox values. Happy Tweening! Link to comment Share on other sites More sharing options...
swatip Posted January 24, 2023 Author Share Posted January 24, 2023 Hi, Thank you for your suggestion!! I tried to add event listener to the particular div which has SVG but cursor still has offset. I tried few thing but its not working. Can you please help? Adding my codepen link See the Pen KKBXVVa by swatiparge (@swatiparge) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 24, 2023 Share Posted January 24, 2023 Hi, As mentioned before this is about translating the mouse event coordinates into the SVG element's coordinates: See the Pen BaPrRda by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
swatip Posted January 24, 2023 Author Share Posted January 24, 2023 Yes. Thanks a lot!!! 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