JAVASCRIPT

How to use React Framer-Motion

// INSTALL:
npm install framer-motion

// IMPORT: in your APP.js or any component file
import {motion} from framer-motion

// USE: motion gives different props like animate, initial, transition, etc..
<motion.div animate={{y:250,transition:{duration:2,delay:1} }}
initial={{x:100}}> Quantity</motion.div>

reactjs framer motion

import { motion } from 'framer-motion';

//use key with router if you are trying to do page transitions
function App ({ Component, pageProps, router}) {
	return (
   		<motion.div key={router.router} initial="pageInitial" animate="pageAnimate" variants={{
       		pageInitial: {
				opacity:0
			},
      		pageAnimate: {
           		opacity:1 
            },
		}}>
        	<Component {...pageProps} />
		</motion.div>
    )	
}

export default App;

framer motion react

<motion.div  animate={{    x: 0,    y: 0,    scale: 1,    rotate: 0,  }}/>