I’m trying to build an animate like Neurable https://www.neurable.io/

You can see this animate in the Header and a little bit below, in the image of the maintainer. Basically, the image has a initial scale 0.8 and when the target reach 0.5 of the view port, the image becomes grow progressively until scale 1.0.

This application was built with Next.js

I’ve already try this way, but the image stay static with scale 0.8

"use client";

import Image from "next/image";
import "./about.scss";;
import { useRef } from "react";
import { useScroll, motion } from "framer-motion";

const About = () => {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["0 0.5", "0.5 0.5"],
  });

return (
<motion.div
         ref={ref}
        initial={{ scale: 0.8 }}
        animate={{
          scale: scrollYProgress,
          transition: {
            duration: 1,
          },
        }}
      >
        <section
          className="test"
          style={{
            width: "100%",
            height: "100vh",
            minHeight: "262px",
            paddingTop: "96px",
          }}
        >
          <Image
            src="/about.svg"
            alt="about_people"
            width={0}
            height={0}
            style={{
              objectFit: "cover",
              width: "100%",
              height: "100%",
              margin: "auto",
            }}
          />
        </section>
      </motion.div>
)
}

and if I take off the initial attribute, it works, but the image begins with scale 0 and it is not the animate that I need.

<motion.div
        ref={ref}
        style={{
          scale: scrollYProgress,
        }}
      >
        <section
          className="test"
          style={{
            width: "100%",
            height: "100vh",
            minHeight: "262px",
            paddingTop: "96px",
          }}
        >
          <Image
            src="/about.svg"
            alt="about_people"
            width={0}
            height={0}
            style={{
              objectFit: "cover",
              width: "100%",
              height: "100%",
              margin: "auto",
            }}
          />
        </section>
      </motion.div>
    </>
  );
};

export default About;