feat: implement enhanced section scroll snapping with improved navigation and smooth transitions

Author: artgolwebdev

src/components/SectionNavigation.tsx

@@ -7,34 +7,17 @@ interface SectionNavigationProps {
 }
 
 export function SectionNavigation({ sections }: SectionNavigationProps) {
-  const [activeSection, setActiveSection] = useState(0);
-  const { locomotiveScroll } = useSmoothScroll();
+  const { 
+    locomotiveScroll, 
+    currentSection, 
+    totalSections, 
+    scrollToSection 
+  } = useSmoothScroll();
+  
+  // Use the context's currentSection instead of local state
+  const activeSection = currentSection;
 
-  useEffect(() => {
-    if (!locomotiveScroll) return;
-
-    const handleScroll = () => {
-      const scrollY = locomotiveScroll.scroll.y;
-      const windowHeight = window.innerHeight;
-      const currentSection = Math.round(scrollY / windowHeight);
-      setActiveSection(Math.max(0, Math.min(currentSection, sections.length - 1)));
-    };
-
-    locomotiveScroll.on('scroll', handleScroll);
-    return () => {
-      locomotiveScroll.off('scroll', handleScroll);
-    };
-  }, [locomotiveScroll, sections.length]);
-
-  const scrollToSection = (index: number) => {
-    if (locomotiveScroll) {
-      const targetY = index * window.innerHeight;
-      locomotiveScroll.scrollTo(targetY, {
-        duration: 1.2,
-        easing: [0.25, 0.1, 0.25, 1],
-      });
-    }
-  };
+  // Use the context's scrollToSection function for better section snapping
 
   return (
     <>

src/components/SmoothScrollContext.tsx

@@ -1,9 +1,14 @@
-import { createContext, useContext, useEffect, useRef, ReactNode } from 'react';
+import { createContext, useContext, useEffect, useRef, ReactNode, useState } from 'react';
 import LocomotiveScroll from 'locomotive-scroll';
 import 'locomotive-scroll/dist/locomotive-scroll.css';
 
 interface SmoothScrollContextType {
   locomotiveScroll: LocomotiveScroll | null;
+  currentSection: number;
+  totalSections: number;
+  scrollToSection: (index: number) => void;
+  scrollToNextSection: () => void;
+  scrollToPrevSection: () => void;
 }
 
 const SmoothScrollContext = createContext<SmoothScrollContextType>({
@@ -18,96 +23,138 @@ interface SmoothScrollProviderProps {
 
 export function SmoothScrollProvider({ children }: SmoothScrollProviderProps) {
   const locomotiveScrollRef = useRef<LocomotiveScroll | null>(null);
+  const [currentSection, setCurrentSection] = useState(0);
+  const [totalSections, setTotalSections] = useState(0);
+
+  
 
   useEffect(() => {
     // Initialize Locomotive Scroll
     locomotiveScrollRef.current = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]') as HTMLElement,
       smooth: true,
-      lerp: 0.1,
+      lerp: 0.08, // Slightly faster for better responsiveness
       multiplier: 0.8,
-      // Enable snap scrolling to sections
+      // Enhanced snap scrolling
       scrollFromAnywhere: true,
-      // Snap to sections
       snap: true,
-      // Snap duration
-      snapDuration: 1.2,
-      // Snap easing
+      snapDuration: 1.5, // Slightly longer for smoother transitions
       snapEasing: [0.25, 0.1, 0.25, 1],
+      // Better section detection
+      offset: ['0%', '0%'],
       smartphone: {
         smooth: true,
-        lerp: 0.1,
+        lerp: 0.08,
         multiplier: 0.8,
         snap: true,
-        snapDuration: 1.2,
+        snapDuration: 1.5,
       },
       tablet: {
         smooth: true,
-        lerp: 0.1,
+        lerp: 0.08,
         multiplier: 0.8,
         snap: true,
-        snapDuration: 1.2,
+        snapDuration: 1.5,
       },
     });
 
-    // Add keyboard navigation
+    // Get all sections for better navigation
+    const sections = document.querySelectorAll('[data-scroll-section]');
+    setTotalSections(sections.length);
+
+    // Enhanced keyboard navigation with section snapping
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!locomotiveScrollRef.current) return;
 
-      const windowHeight = window.innerHeight;
-      const currentScrollY = locomotiveScrollRef.current.scroll.y;
-      const currentSection = Math.round(currentScrollY / windowHeight);
-      
       switch (e.key) {
         case 'ArrowDown':
         case 'PageDown':
         case ' ':
           e.preventDefault();
-          const nextSection = Math.min(currentSection + 1, Math.floor(document.body.scrollHeight / windowHeight) - 1);
-          locomotiveScrollRef.current.scrollTo(nextSection * windowHeight, {
-            duration: 1.2,
-            easing: [0.25, 0.1, 0.25, 1],
-          });
+          scrollToNextSection();
           break;
         case 'ArrowUp':
         case 'PageUp':
           e.preventDefault();
-          const prevSection = Math.max(currentSection - 1, 0);
-          locomotiveScrollRef.current.scrollTo(prevSection * windowHeight, {
-            duration: 1.2,
-            easing: [0.25, 0.1, 0.25, 1],
-          });
+          scrollToPrevSection();
           break;
         case 'Home':
           e.preventDefault();
-          locomotiveScrollRef.current.scrollTo(0, {
-            duration: 1.2,
-            easing: [0.25, 0.1, 0.25, 1],
-          });
+          scrollToSection(0);
           break;
         case 'End':
           e.preventDefault();
-          locomotiveScrollRef.current.scrollTo(document.body.scrollHeight - windowHeight, {
-            duration: 1.2,
-            easing: [0.25, 0.1, 0.25, 1],
-          });
+          scrollToSection(totalSections - 1);
           break;
       }
     };
 
+    // Section navigation functions
+    const scrollToSection = (index: number) => {
+      if (!locomotiveScrollRef.current || index < 0 || index >= totalSections) return;
+      
+      const sections = document.querySelectorAll('[data-scroll-section]');
+      const targetSection = sections[index] as HTMLElement;
+      
+      if (targetSection) {
+        locomotiveScrollRef.current.scrollTo(targetSection, {
+          duration: 1.5,
+          easing: [0.25, 0.1, 0.25, 1],
+        });
+        setCurrentSection(index);
+      }
+    };
+
+    const scrollToNextSection = () => {
+      const nextSection = Math.min(currentSection + 1, totalSections - 1);
+      scrollToSection(nextSection);
+    };
+
+    const scrollToPrevSection = () => {
+      const prevSection = Math.max(currentSection - 1, 0);
+      scrollToSection(prevSection);
+    };
+
+    // Track current section on scroll
+    const handleScroll = () => {
+      if (!locomotiveScrollRef.current) return;
+      
+      const scrollY = locomotiveScrollRef.current.scroll.y;
+      const windowHeight = window.innerHeight;
+      
+      // Find which section is currently in view
+      sections.forEach((section, index) => {
+        const rect = section.getBoundingClientRect();
+        if (rect.top <= windowHeight / 2 && rect.bottom >= windowHeight / 2) {
+          setCurrentSection(index);
+        }
+      });
+    };
+
+    // Add scroll event listener
+    locomotiveScrollRef.current.on('scroll', handleScroll);
+
     document.addEventListener('keydown', handleKeyDown);
 
     // Cleanup
     return () => {
       if (locomotiveScrollRef.current) {
+        locomotiveScrollRef.current.off('scroll', handleScroll);
         locomotiveScrollRef.current.destroy();
       }
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, []);
+  }, [currentSection, totalSections]);
 
   return (
-    <SmoothScrollContext.Provider value={{ locomotiveScroll: locomotiveScrollRef.current }}>
+    <SmoothScrollContext.Provider value={{ 
+      locomotiveScroll: locomotiveScrollRef.current,
+      currentSection,
+      totalSections,
+      scrollToSection,
+      scrollToNextSection,
+      scrollToPrevSection
+    }}>
       {children}
     </SmoothScrollContext.Provider>
   );

src/styles/globals.css

@@ -295,6 +295,30 @@ html.has-scroll-smooth {
   scroll-behavior: smooth;
 }
 
+/* Section snapping enhancements */
+[data-scroll-section] {
+  min-height: 100vh;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+/* Ensure smooth transitions between sections */
+[data-scroll-container] {
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+}
+
+/* Enhanced section transitions */
+[data-scroll-section] {
+  transition: transform 0.3s ease-out;
+}
+
+/* Prevent content jumping during snap */
+[data-scroll-section] * {
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+}
+
 /* Custom scrollbar for smooth scrolling */
 .c-scrollbar {
   position: fixed;