feat: scroll animations

utils/Animation.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { motion, useAnimation } from "framer-motion"
+import { useInView } from "react-intersection-observer"
+
+const AnimatedDiv = () => {
+  const controls = useAnimation()
+  const { ref, inView } = useInView()
+
+  React.useEffect(() => {
+    if (inView) {
+      controls.start("visible")
+    } else {
+      controls.start("hidden")
+    }
+  }, [controls, inView])
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate={controls}
+        variants={{
+          visible: { scale: 1, opacity: 1 },
+          hidden: { scale: 0, opacity: 0 },
+        }}
+        transition={{ duration: 0.5 }}
+      />
+    </div>
+  )
+}
+
+export default AnimatedDiv