Agregamos la librería:

  • [Nombre de libreria]

CSS:

				
					/* CURSOR */
#cursorElement{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 99999;
	mix-blend-mode: exclusion; 
}
#cursorElement::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	mix-blend-mode: exclusion; 
	pointer-events: none;
	z-index: 99999;
	background: transparent;
	border: 1px solid #fff;
	opacity: 1;
	border-radius: 100%;
}
#cursorElement #cursor_arrow{
	opacity: 0;
	transition: .6s;
	transform: scale(0.3);
	pointer-events: none;
}
#cursorElement.showArrow{
	cursor: pointer;
	pointer-events: none;
}
#cursorElement.showArrow #cursor_arrow{
	opacity: 0;
	transform: scale(1);
	pointer-events: none;
	display: none;
}

JS:

				
					/* window on load */
$(window).on('load', function() {
	cursorPointer();
});

/* Cursor */
	function cursorPointer() {
		if( window.innerWidth >= 1050 ){
			let cursorElement = document.createElement('div');
			cursorElement.id = 'cursorElement';
			document.querySelector('body').append(cursorElement);

			let cursor = document.createElement('img');
			cursor.id = 'cursor_arrow';
			cursor.src = "/wp-content/uploads/2023/04/cursor.svg"
			cursorElement.append(cursor);

			gsap.set(cursorElement, { xPercent: -50, yPercent: -50 });

			var pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
			var mouse = { x: pos.x, y: pos.y };
			var speed = 0.3;

			var fpms = 60 / 1000;

			var xSet = gsap.quickSetter(cursorElement, "x", "px");
			var ySet = gsap.quickSetter(cursorElement, "y", "px");

			window.addEventListener("mousemove", e => {
				mouse.x = e.x;
				mouse.y = e.y;
			});

			gsap.ticker.add((time, deltaTime) => {
				var delta = deltaTime * fpms;
				var dt = 1.0 - Math.pow(1.0 - speed, delta);

				pos.x += (mouse.x - pos.x) * dt;
				pos.y += (mouse.y - pos.y) * dt;
				xSet(pos.x);
				ySet(pos.y);
			});

			// Mostrar flecha al entrar en elementos con la clase
			document.querySelectorAll('.cursor__show-arrow').forEach((elem) =>{
				elem.addEventListener("mouseenter", (el) => {
					cursorElement.classList.add('showArrow')
					gsap.to('#cursorElement', { width: '80px', height: '80px' })
				})

				elem.addEventListener("mouseleave", (el) => {
					cursorElement.classList.remove('showArrow')
					gsap.to('#cursorElement', { width: '25px', height: '25px' })
				})
			});
		}
	}
	/* Fin Cursor */