Custom cursor not growing/scaling on hover

[HunterD 1 Likes (Newbie)]

Hello - I have a code for a custom cursor, and the cursor, which is a ball/circle, was supposed to grow/scale when hovering over a link, if you see the code below, this function is there, but it is not working, does anyone know what's wrong? Thank you in advance. The code is from codepen. I am using the following  code, everything is working, except the hover thing I mentioned.

 

div class="cursor">
    <div class="cursor__ball cursor__ball--big ">
        <svg height="30" width="30">
            <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
        </svg>
    </div>

    <div class="cursor__ball cursor__ball--small">
        <svg height="10" width="10">
            <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
        </svg>
    </div>
</div>

<style>
    body .cursor {
        pointer-events: none;
    }

    body .cursor__ball {
        position: fixed;
        top: 0;
        left: 0;
        mix-blend-mode: difference;
        z-index: 1000;
    }

    body .cursor__ball circle {
        fill: #f7f8fa;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<script>
    const $bigBall = document.querySelector('.cursor__ball--big');
    const $smallBall = document.querySelector('.cursor__ball--small');
    const $hoverables = document.querySelectorAll('a');

    // Listeners
    document.body.addEventListener('mousemove', onMouseMove);
    for (let i = 0; i < $hoverables.length; i++) {
        if (window.CP.shouldStopExecution(0)) break;
        $hoverables[i].addEventListener('mouseenter', onMouseHover);
        $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
    }

    // Move the cursor
    window.CP.exitedLoop(0); function onMouseMove(e) {
        TweenMax.to($bigBall, .4, {
            x: e.clientX - 15,
            y: e.clientY - 15
        });

        TweenMax.to($smallBall, .1, {
            x: e.clientX - 5,
            y: e.clientY - 7
        });
    }

    // Hover an element
    function onMouseHover() {
        TweenMax.to($bigBall, .3, {
            scale: 4
        });
    }
    function onMouseHoverOut() {
        TweenMax.to($bigBall, .3, {
            scale: 1
        });
    }
</script>

 

 

 

See the Pen RQqvQx by clementGir (@clementGir) on CodePen

[OSUblake 18,477 Likes (Superhero)]

Welcome to the forums @HunterD

 

The CodePen works fine, although I would strongly recommend updating to latest version of GSAP. That's a really old version there.

 

 

And you should not be copying code from that view uncompiled section as CodePen is injecting stuff that will not work outside of CodePen. 

 

if (window.CP.shouldStopExecution(0)) break;

 

Just use's what is actually shown the editor.

 

[HunterD 1 Likes (Newbie)]

Thank for answering. Works fine, but not on my website, where I placed the exact same code. Not sure what's going on but the cursor won't scale/grow when hovering over links.

[Cassie 5,164 Likes (Superhero)]

I'm afraid we can't help without a demo!

If I were you I'd start by checking out if this is logging anything out and then working step by step to troubleshoot from there.

 

function onMouseHover() {
  console.log('hover')
}

 

[HunterD 1 Likes (Newbie)]

Thank for answering. I read on a forum page I might be missing a CSS hover class, I was wondering if that might be the case? Add a css hoverable class to my css so it targets all links on the website?

[HunterD 1 Likes (Newbie)]

Never mind, I fixed it! Thank you!