Framer Motion Not Working with Next.js and Tailwind CSS

[mwangimuringi]

Description

When trying to implement Framer Motion animations in a Next.js project styled with Tailwind CSS, the animations either don't work as expected or are not applied at all. The issue seems to occur specifically with page transitions, layout animations, or animating elements within components.

Screenshots

No response

✨ Browser

Google Chrome

Checklist 🚀

• [X] I checked and didn't find similar issue
• [X] I have read the Contributing Guidelines
• [X] I am willing to work on this issue (blank for no).

[mwangimuringi]

import dynamic from 'next/dynamic';

const MotionComponent = dynamic(() => import('./YourComponent'), { ssr: false });

export default function Page() { return (

); }

[mwangimuringi]

If you're working with page transitions, use AnimatePresence to properly handle the exit and enter animations in Next.js.

import { AnimatePresence, motion } from 'framer-motion'; import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) { const router = useRouter();

return (

); }