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.

Features:

  • 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.

cursor.setState('colorClass')
<div data-cursor="colorClass">
  ...
</div>

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

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

6. Set the show 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>

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.

Share