Not kept up my notes for soo long because of work projects! 😭

• I have been working with framer motion. The big revelation I’ve had with framer is thinking about everything as variants . When we key our animations objects into a variants object like so…

const container = {

	hidden: { opacity: 1, scale: 0 },

	visible: {
		opacity: 1,
		scale: 1,
		transition: {
			delayChildren: 0.3,
			staggerChildren: 0.2
		}
	}
}

… the magic behind framer motion is that it knows how to tween between the two animation states when you provide the keys of the variants objects into Framer component props e.g animate

• Things get really interesting with framer when you pass motion values into motion components. A motion elements is a component that looks like this

import {motion} from 'framer'

...
<motion.div> I behave like a regular div </motion.div>

The styles tag/prop has superpowers now and can accept “motions values”

function Component() {

	const x = useMotionValue(0)
	useMotionValueEvent(x, "animationStart", () => {
		console.log("animation started on x")
	})

	useMotionValueEvent(x, "change", (latest) => {
		console.log("x changed to", latest)
	})

return <motion.div style={{ x }} />

}

in this example, the x value can be passed into style and the component can magically animate the x value of the component without tonnes of re-renders. Framer does its animations outside of the React re-rendering process