Fancy Cursor Animations In jQuery & GSAP - Cursor & Magnetic

A custom cursor plugin that helps you create fancy and customizable cursors with custom hover state when hovering over elements.

Features:

• Custom background color.
• Custom cursor text.
• Exclusion or opaque mode.
• Custom cursor size.
• Sticky & Magnetic effects.
• Based on jQuery and GSAP.

See It In Action:

See Also:

• Elastic Hover Effect With jQuery And GSAP

How to use it:

1. Download the package and import the necessary resources in your project.

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

2. Initialize the custom 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 color of the custom cursor with .setState('colorClass') or [data-cursor="colorClass"] attribute.

cursor.setState('colorClass')

<div data-cursor="colorClass">
  ...
</div>

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

cursor.setText('jQueryScript')

<div data-cursor-text="jQueryScript">
  ...
</div>

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

cursor.setState('-opaque')

<div data-cursor="-exclusion">
  ...
</div>

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

cursor.setState('sizeClass')

<div data-cursor="sizeClass">
  ...
</div>

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

cursor.setStick(element);

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

---

This awesome jQuery plugin is developed by michaelgudzevskyi. For more Advanced Usages, please check the demo page or visit the official website.