Adding sticky cursor and magnetic to the same element causes the element to glitch off the page

[fantaz-st]

So i have set the code like this:

const Navbar = () => { return ( <div className={classes.navbar} data-scroll-section> <div className={classes.logo} data-cursor-magnetic> BALENCIAGA. <div className={classes.menu} data-cursor-stick='#stick-item' data-cursor-exclusion data-cursor-size='80px'> <p className={classes["button-text"]}>Menu

<div className={classes["burger-wrapper"]} id='stick-item' data-cursor-magnetic> <div className={classes.burger}> ); }; export default Navbar;

Logo has the magnetic property and is performing as it should, but the burger wrapper isn't. Cursor sticks to the burger element (spans) and if you try hovering over the burger it glitches off the page.

[ehsan-shv]

Hi! please provide a demo on codesandbox.