Fix a bug with animation using React Framer - Tailwind and Next JS 12

React Framer - Tailwind - NextJS

Ideally I’d like something like this on a route change https://s81tc.csb.app/ . (Source: https://codesandbox.io/s/react-router-transition-with-framer-motion-s81tc
)

The site I’m working on is here: https://freelancer-test.vercel.app

The problem is there is a white flash before the page transition occurs. Ideally I’d like the original page to stay and the new page to transition from the right to the left and the page to exit at the same time go to the left.


I suspect the problem is in this component:
`src/components/Layout/Transitions/Transitions.tsx`

```tsx
import { ReactNode } from 'react';

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



export const PageVariants = {
initial: {
x: '1000px',
},
in: {
x: 0,
},
out: {
x: 0,
},
};

export const PageTransition = {
type: 'spring',
mass: 0.2,
// duration: 10,
};

type Props = {
children?: ReactNode;
};

const Transitions = ({
children,
}:
Props) => {
const router = useRouter();

return (
<AnimatePresence>
<motion.div
key={router.asPath ?? ''}
initial="initial"
animate="in"
exit="out"
variants={PageVariants}
transition={PageTransition}
>
{children}
</motion.div>
</AnimatePresence>
);
};
export default Transitions;

```