← SYNTROPIC ECOSYSTEMS // NETWORK NODE

Fehler beim App-Router bei Framer Motion Gemeinsam genutzte Layout-Animationen

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.4.1-canary.1
      eslint-config-next: 13.0.7
      react: 18.2.0
      react-dom: 18.2.0
```


### Wh

Der Fehler tritt auf, weil die shared layout animations von Framer Motion in Next.js (ab Version 13) unter Verwendung des App-Verzeichnisses nicht korrekt umgesetzt werden. Um den Fehler zu beheben, folgen Sie den untenstehenden Schritten:

Überprüfen Sie zunächst, ob Sie die neueste Version von Framer Motion verwenden. Stellen Sie sicher, dass layoutId korrekt auf die Motion-Elemente angewendet wird:

import { motion } from 'framer-motion';

const Navigation = () => (
  <div>
    <motion.div layoutId="highlight" />
    ...
  </div>
);

Da Framer Motion 5 die Komponente AnimateSharedLayout entfernt hat, verwenden Sie das layoutId Attribut, um Komponenten ohne diese Umhüllung von einer zur anderen zu animieren.

Falls das Problem weiterhin besteht, kann ein vorübergehender Workaround darin bestehen, Ihren App-Ordner in ein Pages-Verzeichnis zu verschieben, um zu prüfen, ob die Animationen dort korrekt ausgeführt werden. Alternativ ziehen Sie in Erwägung, die Animationen manuell zu implementieren oder weitere spezifische Anpassungen in Ihrer App vorzunehmen.

🤝 It's a gift. Gift something back.

Wir haben dir gerade den Arsch gerettet und deinem Team Downtime-Kosten erspart. Keine Paywall, kein Formular. Wenn dein Server wieder atmet, schließe den kybernetischen Kreislauf:

Dauerhaft immunisieren (49€/M) Zieh weiter (0€)