Framer-Motion滚动触发fadeIn动效失效问题求助

你的代码已定义好fadeIn动画变体，但缺少滚动视口检测触发逻辑——Framer Motion不会自动识别元素进入视口的行为，必须手动配置触发条件，以下是具体修复方案：

核心修改点 #

• 给motion.div添加initial="hidden"，指定初始状态对应变体里的hidden配置
• 添加whileInView="show"，设置元素进入视口时切换到show状态执行动画
• 可选配置viewport属性，控制动画触发的时机和重复行为

修改后的Events组件代码 #

import React from 'react'
import { motion } from 'framer-motion'
import { fadeIn, slideIn } from '../motion'

const Events = () => {
  return (
    <div className='px-4 py-10 h-full'>
        <div className='flex flex-col items-center justify-center w-full gap-10'>
            <p className='text-lg text-slate-800 font-semibold'>Events</p>

            <div className='flex items-center justify-center'>
                <motion.div
                  variants={fadeIn('left','tween', 0.3, 1)}
                  initial="hidden"
                  whileInView="show"
                  viewport={{ once: true, margin: "-100px" }}
                  className='flex flex-col justify-center gap-10'
                >
                    <h2 className='text-3xl'>Platinum Award</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed ad libero eius totam omnis obcaecati amet dolores quod cumque eveniet recusandae, eos dolore nostrum corrupti.</p>
                </motion.div>
            </div>
        </div>
    </div>
  )
}

export default Events

额外说明 #

• viewport={{ once: true }}：确保动画仅在元素第一次进入视口时触发，避免滚动来回重复执行
• margin: "-100px"：调整动画触发时机，比如元素顶部距离视口底部还有100px时就启动动画，提升交互流畅度
• 若需要更复杂的滚动联动效果，可使用useScroll+useTransform钩子，但对于基础的入场动画，whileInView是最简洁的实现方式

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