how to stop framer motion animation run on every re rendering

Question

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?

Did you try to move `const MotionCard = motion(Card);`out of your component ? — OneQ, Dec 31 '22 at 08:32
Thanks my friend! that worked could you please write it as an answer? — ali safaeyan, Dec 31 '22 at 08:37

score 0 · Accepted Answer · answered Dec 31 '22 at 08:39

0

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.

answered Dec 31 '22 at 08:39

OneQ

1,149
1
8
15

score 0 · Answer 2 · answered Mar 27 '23 at 12:45

0

It's very easy with React 18. Use a hook. Use useEffect hook with an empty dependency array and run your animations in the hook. Also remember that framer motion has utility functions for animations as well. Check their documentation.

answered Mar 27 '23 at 12:45

Saqlain

465
3
11

how to stop framer motion animation run on every re rendering

2 Answers2