Gsap-cursor NPM

🦄 Cursor.js

Customize mouse cursor completely with JS, powered by GSAP.

Key features:

Customize native cursor with JS.
Update cursor style when hover on specific elements.

Screen Recording 2022-01-23 at 20 44 49

Installation

From NPM

npm i gsap-cursor

import {Cursor} from "gsap-cursor";

new Cursor();

From CDN

<!-- UNPKG (GSAP included) -->
<script src="https://unpkg.com/gsap-cursor/dist/gsap-cursor.min.js"></script>

new Cursor();

Configuration

const config = {
    speed: .2, // the smaller the slower
    className: '', // custom class for the cursor
    style: {
        width: '15px',
        height: '15px',
        borderRadius: '50%',
        backgroundColor: `rgba(0, 0, 0, .5)`
    }
};
const cursor = new Cursor(config);

Custom style on hover

const config = {
    speed: .2, // the smaller the slower
    className: '', // custom class for the cursor
    style: {
        width: '15px',
        height: '15px',
        borderRadius: '50%',
        backgroundColor: `rgba(0, 0, 0, .5)`
    },
    hover: [
        // text
        {
            selector: 'p',
            in: {
                borderRadius: 0,
                width: '2px',
                height: '30px',
                backgroundColor: 'rgba(0,0,0,.3)'
            }
        },
        // clickable elements
        {
            selector: 'a, button',
            magnetic: true,
            in: data => {
                gsap.to(data.cursor, {
                    width: data.hoverTarget.offsetWidth + 6,
                    height: data.hoverTarget.offsetHeight + 4,
                    borderRadius: '4px',
                    backgroundColor: 'rgba(0,0,0,.05)'
                });
            }
        }
    ]
};
const cursor = new Cursor(config);