Jump to content
Search Community

Custom cursor not growing/scaling on hover

HunterD test
Moderator Tag

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>

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

    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;

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></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

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

  • 1 year later...

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.
  • Create New...