Custom Cursor from CODEPEN

Hi, I am trying to add the following code to have the exact same custom cursor, but I don't know which code I need to copy and where I need to paste onto Squarespace. Any help would be appreciated.  And no, it doesn't work on code blocks.Thanks!

https://codepen.io/clementGir/pen/RQqvQx

Try adding to Settings > Advanced > Code Injection > Footer

<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('.hoverable');

// 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.pageX - 15,
    y: e.pageY - 15 });

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

}

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

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1 });

}
</script>

Hi @tuanphan

Thank you so much for providing the workaround code. It almost works perfectly!

But on my website (www.ah.studio), it doesn't expand in size when I hover over a link. I would be incredibly grateful if you had any ideas about how I can get this to work? 

Thank you very much in advance. 

Best wishes, 

Matt

15 hours ago, MattDerrickAH said:

Hi @tuanphan

Thank you so much for providing the workaround code. It almost works perfectly!

But on my website (www.ah.studio), it doesn't expand in size when I hover over a link. I would be incredibly grateful if you had any ideas about how I can get this to work? 

Thank you very much in advance. 

Best wishes, 

Matt

Change this line

const $hoverables = document.querySelectorAll('.hoverable');

to this

const $hoverables = document.querySelectorAll('a');

You are the don @tuanphan. Thank you as always for your rapid answer, I'm forever grateful! 🙏