我试图在react中创建一个效果，当页面滚动时，我的文本从上到下逐渐填充颜色，如下所示：
我认为useTransform变量在样式化文本中不起作用。
effect
为了做到这一点，我使用2个相同的文本-一个白色的只是轮廓和其他充满了颜色，这是显示与剪辑路径风格。为了跟踪滚动，我使用framer-motion和useScroll以及useTranslate。它在指定为style right时工作得很好，但当值需要像clipPath这样的较长文本时就不行了。

const {scrollY} = useScroll();
    const y = useTransform(scrollY, [0,500], [0,100] );

    const style = {
       clipPath: `polygon(0px 0px, 100% 0px, 100% ${y}%, 0px ${y}%)`,
       right: x,
    };

其结果只是完全填充的文本，而不管滚动。以下是div：

<div style={{right: x}} className="textbox2">
   <motion.h2 style={{marginRight: x}} id="name">MAKS</motion.h2>
   <motion.h2 style={style} id="overname">MAKS</motion.h2>
</div>

我还是新的React，所以感谢任何帮助！