duration property not working on text color with react

[payne199]

It seems that the duration property of my tween acts on all other properties except for the color property. 

I am simply wanting a gradual change in color from black to brown.  Would someone enlighten me on this?

const Title = () => {
  const [titleColor, setTitleColor] = useState(true);
  const title = useRef(null);
  
  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      gsap.to(title.current, { duration: 3, x: "20px", color: "brown", scale: 1.5, ease: "power1.in" });
    }, titleColor);

    return () => ctx.revert();
  }, [titleColor]);

  return (
    <div className="container">
      <p className="title" ref={title}>
        Title
      </p>
    </div>
  );
};

[mvaneijgen]

If you set a hex color it works. Also highly recommend reading the following article if you're using react https://gsap.com/react If you need further assistance, please provide a minimal demo, so that we can take a look at your code in action. Hope it helps and happy tweening! 

 

See the Pen WNmqLOK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[payne199]

Thanks for the knowledge and article link. I got some studying to do 🙂.