Custom cursor with Greensock
Tags: javascript, greensock, css, codenewbie
Published: 2020-11-07 16:56:58

[Demo](https://youtu.be/_UR74tkspqc)
Hi guys, in this short tutorial, you're going to learn how to create an animated custom cursor with GSAP and basic HTML and CSS. Ok, then, what's this GSAP called?

##### What is GSAP ?
Greensock Animation Platform(GSAP) is a JavaScript library for creating high-performance animations. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch!.GSAP has been tested across all major web browsers – including legacy fares such as Internet Explorer. All browser-related tweaks and fallbacks have already been integrated into the platform.

##### Why GSAP ?
* Crazy fast
* Freakishly robust
* Compatible
* Animate anything
* Lightweight and expandable
* No dependencies
* Advanced sequencing

[Detailed information](https://greensock.com/gsap/)

Ok.let's start the coding then.

`index.html`

```HTML
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Custom Cursor</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>

<div class="cursor"></div>
<div class="follower"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
```


The first thing you need to do is, add gsap.min.js to your index.html.To [Install GSAP](https://greensock.com/docs/v3/Installation), you can use the following methods. 


![Screenshot (381)](https://dev-to-uploads.s3.amazonaws.com/i/qm512nrr4jljbgmgw6s0.png)

after that, import style.css and main.js to your index.html.

`style.css`

```CSS

*{cursor: none;}

body{
  background-color:black;
  overflow: hidden;
}

.cursor{
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2000;
    user-select: none;
    pointer-events: none;
}

.follower{
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #6eff00;
    border-radius: 50%;
    opacity: 0.7;
    user-select: none;
    pointer-events: none;
}
```

`main.js`

```javascript
gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});

var follow = document.querySelector('.follower');
var cur = document.querySelector('.cursor');

window.addEventListener('mousemove',e => {
    gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});
    gsap.to(follow,0.9,{x:e.clientX,y:e.clientY});
});

```

```
gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});
```
 
Here, the `gsap.set()` methods always set the follower and the cursor centered on each other when we move the cursor. 
Watch the [Demo](https://youtu.be/_UR74tkspqc), then you can understand it clearly.



```
 gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});
```
`gsap.to()` specifies the values to which the object is to be animated. Here,`0.2` is the duration time of the cursor moves.
 
The 'clientX' property returns the horizontal mouse pointer coordinate when the mouse event is triggered. 

The 'clientY' property returns the vertical mouse pointer coordinate when the mouse event is triggered.

[Demo](https://youtu.be/_UR74tkspqc)

------------------------------------------------------------------
So, hope you all like this tutorial, and don't forget to check out and subscribe my YouTube channel. There are very useful videos on my channel and that will be really helpful to your career in web development.

https://www.youtube.com/channel/UCEZ2SM-qyXzwskpmRrCAvxQ