How to create custom cursor like awwwards website using gsap

January 22, 2022

please give me idea, how i create custom cursor like awwwards websites.
using only gsap.

i try to create custom cursor but this js code is very confusing to me.so i want to create this type of cursor in short of code using gsap.

can i migrate this cursor javascript code to gsap and make this type of cursor.

// UPDATE: I was able to get this working again... Enjoy!

var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');
var a = document.querySelectorAll('a');

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
});

document.addEventListener('mousedown', function(){
  cursor.classList.add('click');
  cursorinner.classList.add('cursorinnerhover')
});

document.addEventListener('mouseup', function(){
  cursor.classList.remove('click')
  cursorinner.classList.remove('cursorinnerhover')
});

a.forEach(item => {
  item.addEventListener('mouseover', () => {
    cursor.classList.add('hover');
  });
  item.addEventListener('mouseleave', () => {
    cursor.classList.remove('hover');
  });
})

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
  cursor: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

h1 {
  font-family: montserrat;
  font-size: 40px;
}

a {
  font-family: Montserrat;
  position: relative;
  text-decoration: none;
}

a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  margin-top: 0px;
  left: 0%;
  background: black;
  transition: width .3s ease;
}

a:hover:after{
  width: 100%;
  left: 0%;
  background: black;
}

.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid black;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + 15px), -50%);
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
}

.hover {
  background-color: red;
  opacity: 0.5;
}

.cursorinnerhover {
  width: 50px;
  height: 50px;
  opacity: .5;
}

<section>
  <h1>Custom Cursor</h1>
  <a href="#">Hover Me</a>
</section>
<div class="cursor"></div>
<div class="cursor2"></div>

>Solution :

this is easy, to create custom cursor in gsap.
use evt.clientaxises property to element follow mouse.
if you make it smooth and lerpness, so you can add ease.

try following code:

document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;

  gsap.set(".cursor", {
    x: mouseX,
    y: mouseY });


  gsap.to(".shape", {
    x: mouseX,
    y: mouseY,
    stagger: -0.1 });

});

.cursor {
  position: fixed;
  background: #2128bd;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  will-change: transform;
  user-select: none;
  pointer-events: none;
  z-index: 10000;
}
.shapes {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
    pointer-events: none;
}
.shape {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
}

<div class="cursor"></div> //main cursor el
<div class="shapes"> // extra el to following cursor
  <div class="shape shape-1"></div> 
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
</div>