Magnet Jumping

[luiskabes-arch]

Hi Cuberto Team,

Thanks for the magnetic js library, it's really awesome.

By the way, i've some issue to implement the magnetic on some element, if a scroll position is on the top of the page, nothing issue, but if i try to scroll the page and try to magnet some element, the magnet is jumping, please take a look on the link below

https://monosnap.com/file/bM3ChmmhffFwk3O3Hlh87hmfY367xL

[luiskabes-arch]

I'm using ScrollSmoother from GSAP btw

[atulkadyan]

Hey Luis can you give your socials or LinkedIn i need your help

[NSMNIA]

@luiskabes-arch I ran into the same problem with [email protected]. I got it working by not subtracting the window.pageXOffset or window.pageYOffset from the getBoundingClientRect() at this.x and this.y. I did this because the pageYOffset only increased as I scrolled. Below I created a typescript variant without jQuery. Hopefully this will solve your question as well 😀

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,
        });
    }
}