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

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

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