Jump to content
Search Community

Fill text with color on cursor

swatip test
Moderator Tag

Recommended Posts

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

@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

  • Like 1
Link to comment
Share on other sites



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">

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...