I’m coding a little example with framer motion and React.js. I have a h2 with a text, but I want to imitate the animation from https://angular.dev/, using scroll it should change text color from red to yellow (e.g.),

Here’s my code

import React from "react";
import { motion, useScroll, useTransform } from "framer-motion";

const Text = () => {
  const { scrollYProgress } = useScroll();
  const textColor = useTransform(scrollYProgress, [0, 1], ["red", "yellow"]);

  return (
    <motion.div style={{ height: "100vh" }}>
      <motion.h2
        style={{
          fontSize: "24px",
          padding: "20px",
          color: textColor,
        }}
      >
       Filling text
      </motion.h2>
    </motion.div>
  );
};

export default Text;

The problem is textColor value is always “yellow”. It’s supposed to start from “red” in 0 from “yellow” in 1 within scrollYProgress.

I also want this animation to come from left to right just like angular.dev page.