[BUG] All animations stop working in Next.js

[faelcanalha]

Bug: Motion library animations intermittently fail in Next.js 16

1. Description

When using the motion library in a Next.js 16 application with the "use client" directive, animations fail to work properly in an intermittent pattern. Elements remain stuck at their initial state and never transition to the animate state. This affects all animation properties including opacity, transform values (y, x, scale), and any other animated properties.

2. Critical Information

• Issue is intermittent: Animations work perfectly in some sessions and completely fail in others
• Temporary fix: Requires deleting node_modules, clearing npm cache, and deleting the .next folder, followed by a fresh reinstallation
• Root cause suspicion: The behavior pattern suggests this might be related to caching mechanisms or build process issues

3. Environment

• Next.js version: 16.1.6
• Motion version: 12.34.2
• React version: 19.2.3
• Browser: Brave
• OS: Windows 10

4. Steps to Reproduce

1. Create a new Next.js 16 project
2. Install motion: npm install motion
3. Create a client component with motion elements
4. Run the development server
5. Observe that animations sometimes work, sometimes don't
6. Continue development sessions - issue becomes 100% reproducible after some time

5. Minimal Reproduction Code

"use client";

import { motion } from "motion/react";

export default function TestPage() {
  return (
    <div>
      {/* Opacity animation - doesn't work */}
      <motion.p
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        Opacity animation - STUCK AT 0
      </motion.p>

      {/* Y-axis animation - also doesn't work */}
      <motion.p
        initial={{ y: 20 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.5 }}
      >
        Y animation - STUCK AT 20px
      </motion.p>

      {/* Scale animation - also doesn't work */}
      <motion.p
        initial={{ scale: 0.8 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.5 }}
      >
        Scale animation - STUCK AT 0.8
      </motion.p>
    </div>
  );
}


Expected behavior
All elements should animate from their initial state to their animate state.

Actual behavior
When inspecting the elements in DevTools, they show:

<p style="opacity:0">Opacity animation - STUCK AT 0</p>
<p style="transform: translateY(20px)">Y animation - STUCK AT 20px</p>
<p style="transform: scale(0.8)">Scale animation - STUCK AT 0.8</p>


Environment
Next.js version: 16.1.6
Motion version: 12.34.2
React version: 19.2.3
Browser: Brave
OS: Windows 10


Additional context
The issue is 100% reproducible after some development sessions