feat: smoothscroll

utils/ScrollAnimations/SmoothScroll.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useState, useCallback, useLayoutEffect } from "react"
+import ResizeObserver from "resize-observer-polyfill"
+import { useScroll, useTransform, useSpring, motion } from "framer-motion"
+
+const SmoothScroll = ({ children }: { children: React.ReactNode }) => {
+  const scrollRef = useRef(null)
+
+  const [pageHeight, setPageHeight] = useState(0)
+  const resizePageHeight = useCallback((entries: ResizeObserverEntry[]) => {
+    for (let entry of entries) {
+      setPageHeight(entry.contentRect.height)
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => resizePageHeight(entries))
+    scrollRef.current && resizeObserver.observe(scrollRef.current)
+  }, [scrollRef, resizePageHeight])
+
+  const { scrollY } = useScroll()
+  const transform = useTransform(scrollY, [0, pageHeight], [0, -pageHeight])
+  const physics = { damping: 15, mass: 0.27, stiffness: 55 }
+  const spring = useSpring(transform, physics)
+
+  return (
+    <>
+      <motion.div ref={scrollRef} style={{ y: spring }} className="scroll-container">
+        {children}
+      </motion.div>
+    </>
+  )
+}
+
+export default SmoothScroll