npm install framer-motion
# or
yarn add framer-motion

import { motion } from "framer-motion"
 
function Component() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello World!
    </motion.div>
  )
}

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
>
  Click me
</motion.button>

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
}
 
function Component() {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={variants}
    >
      Hello World!
    </motion.div>
  )
}

<motion.div
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  }}
  transition={{
    duration: 2,
    ease: "easeInOut",
    times: [0, 0.2, 0.5, 0.8, 1],
    repeat: Infinity,
    repeatDelay: 1
  }}
/>

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1 }}
>
  Drag me!
</motion.div>

import { motion, useScroll } from "framer-motion"
 
function Component() {
  const { scrollYProgress } = useScroll()
  return (
    <motion.div style={{ scaleX: scrollYProgress }} />
  )
}

import { motion, AnimatePresence } from "framer-motion"
 
function Component({ isVisible }) {
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Hello World!
        </motion.div>
      )}
    </AnimatePresence>
  )
}

<motion.div layout>
  {/* This will animate to its new position if the layout changes */}
  Content
</motion.div>

<motion.svg width="100" height="100">
  <motion.circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    initial={{ pathLength: 0 }}
    animate={{ pathLength: 1 }}
    transition={{ duration: 2 }}
  />
</motion.svg>

import { motion, useAnimation } from "framer-motion"
 
function Component() {
  const controls = useAnimation()
 
  return (
    <>
      <button onClick={() => controls.start({ x: 100 })}>Move</button>
      <motion.div animate={controls} />
    </>
  )
}

const sequence = async () => {
  await controls.start({ x: 100 })
  await controls.start({ y: 100 })
  await controls.start({ rotate: 180 })
}