如何用Next.js与Framer Motion实现滚动触发的图片渐进缩放动画？

问题核心 #

你遇到的问题源于scrollYProgress返回0-1的滚动进度值，直接绑定scale会导致初始值为0；而设置initial={{scale:0.8}}后，动态的animate值会覆盖初始状态，导致动画失效。

正确实现方案 #

使用useTransform将滚动进度映射到0.8-1.0的缩放范围，既满足初始缩放需求，又能触发平滑过渡动画：

"use client";
import Image from "next/image";
import "./about.scss";
import { useRef } from "react";
import { useScroll, motion, useTransform } from "framer-motion";

const About = () => {
  const ref = useRef(null);
  // 配置滚动监听：元素顶部进入视口50%位置时开始，元素中间对齐视口中间时结束
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["0 0.5", "0.5 0.5"],
  });
  // 将0-1的滚动进度映射为0.8-1.0的缩放值
  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1.0]);

  return (
    <motion.div
      ref={ref}
      style={{ scale }}
      transition={{ duration: 0.8, ease: "easeInOut" }}
    >
      <section
        className="test"
        style={{
          width: "100%",
          height: "100vh",
          minHeight: "262px",
          paddingTop: "96px",
        }}
      >
        <Image
          src="/about.svg"
          alt="about_people"
          width={0}
          height={0}
          style={{
            objectFit: "cover",
            width: "100%",
            height: "100%",
            margin: "auto",
          }}
        />
      </section>
    </motion.div>
  );
};

export default About;

关键说明 #

• useTransform：负责将滚动进度的0-1区间转换为缩放值的0.8-1.0区间，初始状态下滚动进度为0，对应缩放值0.8，完美匹配需求。
• 无需设置initial和animate：直接通过style绑定转换后的scale值，Framer Motion会自动处理滚动过程中的平滑过渡。
• offset配置：["0 0.5", "0.5 0.5"]精准控制动画触发时机——当元素顶部进入视口一半位置时开始缩放，直到元素中间与视口中间对齐时完成缩放。
• 可调整transition的duration和ease参数，匹配目标网站的动画节奏。

内容的提问来源于stack exchange，提问作者Renan França