how to stop framer motion animation run on every re rendering-CodePudding

I am using framer motion for animation and my problem is the animation triggers with every re rendering on my page. the behavior that I want is to animation only once on page entering or reloading not by re rendering. here is my component:

const WrapperLoginFlow = () => {

     const MotionCard = motion(Card);


     return (

        <MotionCard
           initial={{ scale: 0, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
           transition={{ duration: 0.5 }}
        >
           <div>
             something
           </div>

        </MotionCard>
 )};

I have some state in this component that might cause re rendering the page and it cause the animation starts when ever my page re renders. how can I stop this?

CodePudding user response：

You can move const MotionCard = motion(Card); out of your component.

If it is in your component, at every render, it will create again the motion component and trigger the animation.