JQuery & GSAP Fancy Pointer Animations | Cursor & Magnetic

The custom cursor turned into a button which became the current “button trend” that I found on many websites that helps you create imaginative and customizable cursors with a custom hover state when hovering over items.


  • Custom background color.
  • Custom indicator text.
  • Exclusion or opacity mode.
  • Custom cursor size.
  • Adhesive and magnetic effects.
  • Based on jQuery and GSAP.

How to make use of it:

1. Download the package deal and import the required assets in your undertaking.

import $ from 'jquery';
import Cursor from "cursor";
import Magnetic from "magnetic";

2. Initialize the customized cursor plugin.

const cursor = new Cursor({
      container: "body",
      speed: 0.7, // animation speed
      ease: "expo.out", // gsap easing
      visibleTimeout: 300

3. Apply a Magnetic effect.

const magnetic = new Magnetic(el, {
      y: 0.2, // horizontal delta
      x: 0.2, // vertical delta
      s: 0.2, // speed
      rs: 0.7 // release speed

4. Set the background coloration of the customized cursor with .setState('colorClass') or [data-cursor="colorClass"] attribute.

<div data-cursor="colorClass">

5. Set the text displayed within the customized cursor with .setText('Text') or [data-cursor-text="Text"] attribute.

cursor.setText(' ')
<div data-cursor-text=" ">

6. Set the show mode with .setState('-opaque') or [data-cursor="-opaque"] attribute.

<div data-cursor="-exclusion">

7. Set the cursor size with .setState('sizeClass') or [data-cursor="sizeClass"] attribute.

<div data-cursor="sizeClass">

8. Set sticky cursor with <code>.setStick(element) or [data-cursor-stick="selector"] attribute.

<div data-cursor-stick="element">

Fancy Cursor Animations In jQuery & GSAP, Cursor & Magnetic Plugin/Github, circle cursor css

See Demo And Download

Official Website(michaelgudzevskyi): Click Here

This superior jQuery/javascript plugin is developed by michaelgudzevskyi. For extra Advanced Usage, please go to the official website.