Magnet Jumping about cursor-magnetic-demo HOT 3 OPEN

import gsap from 'gsap';

export default class Magnetic {
    private el: HTMLElement;
    private options: {
        y: number;
        x: number;
        s: number;
        rs: number;
    };
    private y: number = 0;
    private x: number = 0;
    private width: number = 0;
    private height: number = 0;

    constructor(
        el: HTMLElement,
        options: Record<string, string | number> = {}
    ) {
        this.el = el;
        this.options = {
            y: 0.2,
            x: 0.2,
            s: 0.2,
            rs: 0.7,
            ...((this.el.dataset.magnetic as unknown as Record<
                string,
                string | number
            >) || options),
        };

        if (this.el.dataset.magneticInit) return;
        this.el.dataset.magneticInit = 'true';

        this.bind();
    }

    private bind() {
        this.el.addEventListener('mouseenter', () => {
            this.y = this.el.getBoundingClientRect().top;
            this.x = this.el.getBoundingClientRect().left;
            this.width = this.el.offsetWidth;
            this.height = this.el.offsetHeight;
        });

        this.el.addEventListener('mousemove', (e) => {
            const y = (e.clientY - this.y - this.height / 2) * this.options.y;
            const x = (e.clientX - this.x - this.width / 2) * this.options.x;
            this.move(x, y, this.options.s);
        });

        this.el.addEventListener('mouseleave', () => {
            this.move(0, 0, this.options.rs);
        });
    }

    private move(x: number, y: number, speed: number) {
        gsap.to(this.el, {
            y: y,
            x: x,
            force3D: true,
            overwrite: true,
            duration: speed,
        });
    }
}