How to dynamically change CSS Filter Property in Next.js with Framer Motion

Question

const heroImage = () => {
  let windowHeight = window.innerHeight;
  const { scrollY } = useScroll();
  const indicator = useTransform(
    scrollY,
    [0, windowHeight],
    ['100%','20%']
  )

  return (
    <motion.div className='fixed w-full bottom-0 z-0'>
      <Image
        className='hero-image'
        src={HeroImage}
        alt='Picture of me'
        style={{
          width: "100%",
          height: "auto",
          filter: `saturate(${indicator}) brightness(20%)`
        }}

      />
    </motion.div>
  );
};

My goal is to use framer motion so that the Image component saturation decreases as I scroll down, but I just can't find any way for this to work especially since I can't apply motion to the Image component and the method that I used in the code above doesn't seem to work (the filter style doesn't appear when I check the browser).

I've been looking around for a way around this but can't seem to find any, I would appreciate any help and suggestion, thank you

Answer 1

I find an alternative way of doing it and it's pretty straightforward.

step 1: Duplicate the image and stack it on top of each other using.

step 2: Make the image with less saturation and brightness below the normal image.

step 3: make the top image opacity decreases as you scroll down.

This will create the illusion that the image loses saturation as it scrolls down.