Making image scale up and down (Grow and shrink) on scroll

I am wondering if anyone can help, I am wanting to make an small image block (which is a basic shape, a triangle ect) grow and shrink or scale up and down as you scroll down the page. 

I know there is the plugin available through squarekicker (https://squarekicker.com/blog/scrolling-effects-for-squarespace#:~:text=SquareKicker Scroll Effects enables you,and blur to any block.) 

but i didnt know if anyone can help me with the code to do it myself - I have got this far but not working correctly 

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const block = document.getElementById("block-bc86dd26121a31bdf991");

    // Define the initial scale factor for the original size
    let scale = 1.0; // Start at the original size

    // Set the threshold position where the block starts shrinking
    const thresholdPosition = block.getBoundingClientRect().top + window.innerHeight / 2;

    // Set up an event listener for the scroll event
    window.addEventListener("scroll", function () {
      const scrollPosition = window.scrollY;

      if (scrollPosition > thresholdPosition) {
        // Scrolling down - Shrink the block
        scale = 1.0 - (scrollPosition - thresholdPosition) * 0.001; // Adjust the scaling factor as needed
      } else {
        // Scrolling up or before the threshold - Keep it at the original size
        scale = 1.0; // Original size
      }

      // Ensure that the scale doesn't go below 0.1 (10%)
      scale = Math.max(scale, 0.1);

      // Apply the scale transformation to the block
      block.style.transform = `scale(${scale})`;
    });
  });
</script>