How to Scale a Circular Background While Keeping an Image Fixed on Scroll in React?

[SanthoshPrabhakaranS]

I'm working on a React project where I want to create an effect where a circular background element scales up as the user scrolls down the page. However, I also want to keep an image inside this circular background fixed in size. Essentially, the circle grows larger, but the image remains the same size.

Here's my current code for this component:

import { motion, useAnimation, useScroll } from "framer-motion";

const ScalingElement = () => {
  const elementRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: elementRef,
    offset: ["0 1", "0 1"],
  });

  return (
    <motion.div
      className="scaling-element absolute bottom-0 flex justify-center w-[120px] h-[120px] bg-yellow-300 rounded-full -z-10"
      ref={elementRef}
      style={{
        scale: scrollYProgress,
        opacity: 1,
      }}
    ></motion.div>
  );
};

export default ScalingElement;

I'm trying to make scroll animation like this website with the yellow element scaling. How to do that using framer motion. I'm trying this but it's scaling in smaller number.