Cursor on the GSAP UI website

[DevVali]

Hi guys, I really liked the preview of the cursor on the GSAP UI website (https://gsap.com/ui/) and would love to implement it to my own website but I have no clue how to start and how implemen it properly, as well as if I can use the SVG of the cursor from the website. If someone could point me in the right direction I would really appreciate that. Thanks. 🙂

[Rodrigo]

Hi @DevVali and welcome to the GSAP Forums!

 

You can use the cursor CSS property with the url() function in order to add a custom cursor to your site:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor#url

 

Although in the case of that particular section is a bit more complex than that, what we do is hide the cursor with cursor: none with the hover selector:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover

 

Then we use a simple mouse follower using quickTo:

https://gsap.com/docs/v3/GSAP/gsap.quickTo()

 

You can check the demo in this last link I provided.

 

Hopefully this helps

Happy Tweening!

[DevVali]

Thank you, this was really helpful!

 

May I also ask how do you keep the cursor "in the box" (so it gets back to the center of the box rather than staying at the top) and where can I find an appropriate SVG like the one on the GSAP UI website for the cursor?

[mvaneijgen]

10 minutes ago, DevVali said:

how do you keep the cursor "in the box" (so it gets back to the center of the box rather than staying at the top)

It probably is scoped to the box element and has min and max values that make it only gets set to the box, lets say the box is 300px then the max the cursor could be set will be between 0px and 300px. Then when the mouse leaves the box it updates the animation to go back to 150px  eg the middle of the box. 

 

12 minutes ago, DevVali said:

where can I find an appropriate SVG like the one on the GSAP UI website for the cursor?

You could look in to svg icons set and find one you like, you could also draw one yourself https://boxy-svg.com/app is a nice tool to quickly draw simple shapes or if you tech savvy enough you can get the svg code by inspecting the element 

 

If you still need help please make a minimal demo. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

Here is a starter template which loads all the plugins 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

[DevVali]

Thanks! If I use the exact same cursor SVG on the GSAP UI website, could I get in legal trouble?

[Rodrigo]

Hi,

 

For the mouse leave animation you can use something like this:

See the Pen YPGKMoO by GreenSock (@GreenSock) on CodePen.

 

5 hours ago, DevVali said:

If I use the exact same cursor SVG on the GSAP UI website, could I get in legal trouble?

Mhhh... we would prefer if you didn't, but most likely there shouldn't be any issues if you use it in some development or test environment and not in a production or paid one. You can search in google for SVG cursor arrow and you'll find thousands of resources and plenty of them free:

https://www.google.com/search?q=cursor+arrow+svg&oq=svg+cursor+arr&gs_lcrp=EgZjaHJvbWUqCAgBEAAYFhgeMgYIABBFGDkyCAgBEAAYFhgeMgcIAhAAGO8FMgcIAxAAGO8FMgcIBBAAGO8FMgcIBRAAGO8F0gEINjIxNWowajGoAgCwAgA&sourceid=chrome&ie=UTF-8

 

Happy Tweening!