2022・02・27

• tinkering around with framer motion some more to try and achieve a page trasistion effect - https://stackblitz.com/edit/nextjs-tfmzae?file=src%2Fcomponents%2FNav.tsx

• Been tinkering around with the basics of framer-motion

• once we motion from framer like so import {motion} from "framer-motion" , we can simply use motion components like so:

<motion.div

	animate={{
		x: 0,
		y: 0,
		scale: 1,
		rotate: 0,
		}}

/>

• The animate prop will animate css properties of that current div with the animate object

• There are also a bunch of animation helpers or what framer calls “multiple gesture animation props” e.g whileHover, whileTap, whileFocus, whileDrag and whileInView . These lets us run animations when these gestures are active.

• Variants, lets us reuse animations

      const variants = {
  
     	visible: { opacity: 1 },
     							
     	hidden: { opacity: 0 },
  
      }

  
  	<motion.div variants={variants} />
  

  	<motion.div
  
  		initial="hidden"
  		
  		animate="visible"
  		
  		variants={variants}
  	
  	/>