使用Framer Motion右侧滑入动画时视口宽度被扩展的问题

问题根源在于：动画元素向右偏移时，会超出父容器与视口范围，浏览器会因此生成水平滚动条；而向左偏移时，元素跑到视口左侧外部，浏览器默认不会为这种负方向溢出触发滚动条，所以不会出现问题。

给你两个直接可行的解决思路：

1. 给动画父容器添加溢出隐藏 #

给外层的motion.div加上Tailwind的overflow-hidden类，让元素偏移出容器的部分被裁剪，不会触发页面滚动条：

<section>
    <div className='grid grid-cols-1 md:grid-cols-2 p-3'>
        <div className='visuals'>
            <p>Lorem ipsum dumb text</p>
        </div>
        <motion.div
            className="overflow-hidden" <!-- 新增溢出隐藏类 -->
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.5 }}
        >
            <motion.div
                variants={{
                    visible: {
                        x: 0,
                        transition: { duration: 0.5 }
                    },
                    hidden: { x: 500 }
                }}>
                <p className='text-2xl font-semibold'>Anytime. Anywhere</p>
                <p className='text-xl'>Access and watch your favorite shows anytime, anywhere.</p>
            </motion.div>
        </motion.div>
    </div>
</section>

2. 用相对宽度替代固定数值偏移 #

把hidden状态的x:500改成x: "100%"，让元素偏移自身宽度的100%，刚好完全藏在父容器右侧，适配所有屏幕尺寸，配合overflow-hidden效果更稳定：

<motion.div
    variants={{
        visible: {
            x: 0,
            transition: { duration: 0.5 }
        },
        hidden: { x: "100%" } <!-- 替换为相对宽度偏移 -->
    }}>
    <p className='text-2xl font-semibold'>Anytime. Anywhere</p>
    <p className='text-xl'>Access and watch your favorite shows anytime, anywhere.</p>
</motion.div>

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