React组件中如何使用多个Framer Motion Ref实现滚动绑定动画？

要给不同的目标元素创建独立的滚动绑定动画，只需要多次调用Framer Motion的useScroll钩子即可，每个目标元素对应一个独立的useScroll实例，这样就能得到各自的滚动进度值，互不干扰。

具体实现步骤：

• 声明第二个目标元素的Ref（比如targetRef2）
• 针对targetRef2单独调用useScroll，获取它的专属滚动进度scrollYProgress2
• 基于新的滚动进度，用useTransform创建对应的动画属性（比如另一组颜色变化、透明度变化等）
• 将新的动画属性传递给对应的组件使用

修改后的完整代码示例：

const App = () => {
  // 第一个目标元素的Ref与滚动进度
  const targetRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: targetRef,
    offset: ["start 0.1", "start 0.05"]
  });

  // 第二个目标元素的Ref与滚动进度
  const targetRef2 = useRef(null);
  const { scrollYProgress: scrollYProgress2 } = useScroll({
    target: targetRef2,
    // 可给第二个元素单独设置offset，控制动画触发的滚动范围
    offset: ["start 0.2", "end 0.1"]
  });

  const heroColour = "white";
  // 第一个动画：基于targetRef的滚动进度修改颜色
  const color = useTransform(scrollYProgress, [0, 1], ["#FFFFFF", "#333333"]);
  // 第二个动画：基于targetRef2的滚动进度创建新动画属性（示例为透明度）
  const headerOpacity = useTransform(scrollYProgress2, [0, 1], [0.3, 1]);

  return (
    <div className="App">
      <Hero colour={heroColour} />
      <div ref={targetRef}>
        <Main />
      </div>
      <div ref={targetRef2}>
        {/* 传入第二个动画属性 */}
        <Header colour={color} opacity={headerOpacity} />
      </div>
    </div>
  );
}

关键说明 #

• 每个useScroll调用都是独立的，它们的target、offset等配置可以完全分开设置，不会互相干扰
• 你可以根据需求，给不同的目标元素创建任意类型的动画属性（颜色、透明度、缩放、位移等），只要基于各自的scrollYProgress即可
• 如果需要更复杂的动画逻辑，还可以结合useMotionValue或animate函数扩展

内容的提问来源于stack exchange，提问作者superdupersolly