Jump to content
GreenSock

HunterD

Custom cursor not growing/scaling on hover

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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')
}

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Never mind, I fixed it! Thank you!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×