[ADD] Smooth Scroll behavior backin by pausing the observer entry effects

Author: Carms Ng

src/components/hero.js

@@ -7,7 +7,7 @@ import LogoGarden from '../components/logo-garden';
 import SiteBorderStyles from '../styles/SiteBorderStyles';
 import StackedAvatar from "./stacked-avatar";
 
-export default function Hero({ sectionRefs, setTeamIndex }) {
+export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
   return (
     <HeroStyles>
       <SiteBorderStyles>
@@ -25,7 +25,11 @@ export default function Hero({ sectionRefs, setTeamIndex }) {
             <p className="text-1xl md:text-2xl mt-2">
               <Trans>We empower freelancer community to excel in long term projects.</Trans>
             </p>
-            <StackedAvatar sectionRefs={sectionRefs} setTeamIndex={setTeamIndex} />
+            <StackedAvatar
+              sectionRefs={sectionRefs}
+              setTeamIndex={setTeamIndex}
+              pausedRef={pausedRef}
+            />
 
           </div>
 

src/components/stacked-avatar.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { graphql, useStaticQuery } from 'gatsby';
 import { GatsbyImage } from "gatsby-plugin-image";
 
-export default function StackedAvatar({ sectionRefs, setTeamIndex }) {
+export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef }) {
   // query all team pics
   const data = useStaticQuery(graphql`{
     allFile(filter: {absolutePath: {regex: "/portraits/"}}, sort: {fields: base}) {
@@ -22,13 +22,29 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex }) {
     }
   }`);
 
+  const scrollToTeam = (top) => {
+    window.scrollTo({ top, behavior: 'smooth' })
+  }
+
+  const unpauseObserver = () => {
+    pausedRef.current = false
+  }
+
+  const moveToTeam = async(top) => {
+    scrollToTeam(top);
+    unpauseObserver();
+  }
+
   const handleClick = (ev) => {
+    // Pause Observer
+    pausedRef.current = true
+    // Update Team Index
     const updatedTeamIndex = parseInt(ev.currentTarget.dataset.team)
     setTeamIndex(updatedTeamIndex)
-    // Navigate to the team section
+    // Find Team Section Top
     const top = sectionRefs.current[2].offsetTop
-    // Remove smooth scroll behavior to bypass the intersection observer
-    window.scrollTo({ top })
+    // Navigate to the Team Section
+    moveToTeam(top)
   }
 
   const pics = data.allFile.edges;

src/pages/index.js

@@ -15,6 +15,7 @@ import 'aos/dist/aos.css';
 
 export default function IndexPage() {
   // Set who in the team is being featured
+  const pausedRef = useRef(false);
   const [teamIndex, setTeamIndex ] = useState(0);
 
   // You can access the elements with itemsRef.current[n]
@@ -34,7 +35,7 @@ export default function IndexPage() {
 
     // Set up observer
     const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
+      if (entry.isIntersecting && !pausedRef.current) {
         const refIndex = parseInt(entry.target.dataset.step)
         const top = sectionRefs.current[refIndex].offsetTop
         window.scrollTo({ top, behavior: 'smooth' })
@@ -57,13 +58,15 @@ export default function IndexPage() {
         }
       })
     }
-  }, [sectionRefs])
+  }, [sectionRefs, pausedRef])
 
   const {t} = useTranslation();
   return (
     <Layout>
       <Seo title={t('Home')} />
-      <div ref={addToRefs} data-step="0"><Hero sectionRefs={sectionRefs} setTeamIndex={setTeamIndex} /></div>
+      <div ref={addToRefs} data-step="0">
+        <Hero sectionRefs={sectionRefs} setTeamIndex={setTeamIndex} pausedRef={pausedRef} />
+      </div>
       <div ref={addToRefs} data-step="1"><Service /></div>
       <div ref={addToRefs} data-step="2"><Team teamIndex={teamIndex} setTeamIndex={setTeamIndex} /></div>
       <div ref={addToRefs} data-step="3"><Steps /></div>