feat: smoothscroll

app/layout.tsx

@@ -1,16 +1,21 @@
+"use client"
 import "styles/tailwind.css"
 import "styles/custom.css"
 import Navbar from "components/Navbar/Navbar"
 
 import Footer from "components/Footer/Footer"
 
+// import SmoothScroll from "utils/ScrollAnimations/SmoothScroll"
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className="bg-[#0f172a] ">
+        {/* <SmoothScroll> */}
         <Navbar logoSrc="/images/logo.webp" />
         {children}
         <Footer />
+        {/* </SmoothScroll> */}
       </body>
     </html>
   )

components/Navbar/Navbar.tsx

@@ -74,16 +74,16 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
           </div>
           <ul className="MENU-LINK-MOBILE-OPEN flex h-full min-h-[300px]  flex-col items-center justify-center text-white">
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="#">Home</a>
+              <a href="#home">Home</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="#">Services</a>
+              <a href="#services">Services</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="#">Portfolio</a>
+              <a href="#portfolio">Portfolio</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="#">About</a>
+              <a href="#aboutUs">About</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#">Sign In</a>

package.json

@@ -69,6 +69,7 @@
     "react-icons": "^5.0.1",
     "react-intersection-observer": "^9.8.2",
     "react-reveal": "^1.2.2",
+    "react-scroll": "^1.9.0",
     "react-scroll-motion": "^0.3.3",
     "react-starfield-animation": "^1.0.1",
     "react-tsparticles": "^2.12.2",

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

yarn.lock

@@ -14238,7 +14238,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash.throttle@^4.0.1:
+lodash.throttle@^4.0.1, lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
@@ -16507,6 +16507,14 @@ react-scroll-motion@^0.3.3:
   resolved "https://registry.yarnpkg.com/react-scroll-motion/-/react-scroll-motion-0.3.3.tgz#8d9a562f98b7b59f05079ac95510f141fa6718f8"
   integrity sha512-Q33prpcdWDfQaHVmED7bo/EReUEBHfL6mOfvMGFP3FhDxTKddIoocMcd3bT9qw2KQ/fqNdJNADf7aiHWSLkXuQ==
 
+react-scroll@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.9.0.tgz#2984006e184afd0e4018f837d127edf5fa8f152c"
+  integrity sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.7.2"
+
 react-sizeme@^2.4.2:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"