Content Shows before showing animation

[sohanemon]

Hi,

I am trying to animate a simple card component. But when I reload the page then the card appears at first then goes to its initial state and then animates.

<motion.div initial={{opacity: 0}} animate={{opacity: 1}}>
<h1>It is a heading</h1>
</motion.div>

When the page reloads the h1 tag is visible, I mean its opacity is 1. Then it goes to opacity: 0 and then again it comes back to opacity: 1.

I have also tried whileInView instead of animate. Please help me to overcome this issue. I am using Next js 13 with tailwind css.

Thank you.

[Albx68]

I'm also on Next 13 with tailwind, its working fine for me, it'd be nice if you could reproduce it using codepen, or a screen recording might help.

[sohanemon]

[sohanemon]

here is the code that wraps all pages inside layout.tsx

'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { usePathname } from 'next/navigation';

export default function TransitionProvider({ children }) {
  const path = usePathname();
  return (
    <AnimatePresence mode='wait'>
      <motion.div
        initial={{ x: -1000, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        transition={{ delay: 0, duration: 2 }}
        exit={{ x: 1000, opacity: 0 }}
        key={path}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

[augustosnk12]

awesome

[Albx68]

xyz.mov

It's working fine for me, can you try putting the transition provider per page because from what I'm seeing, the instance of AnimatePresence is the same and when the key changes, the exit animation is applied to the previous image, I hope that made sense

[sohanemon]

Thanks a lot. But there are too many pages. Around 40-50.