add intersect observer custom hook and implement on TowColumn component, add translateY effect on reveal

Author: cherylli

components/TwoColumn.js

@@ -1,7 +1,9 @@
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import ButtonLink from './ButtonLink';
 import Container from './Container';
 import styles from '../styles/TwoColumn.module.scss';
+import { useIntersect } from '../hooks/useIntersect';
 
 export default function TwoColumn({
   image,
@@ -25,8 +27,29 @@ export default function TwoColumn({
     },
   };
 
+  const [ref, entry] = useIntersect({ threshold: 0.15 });
+  const [firstLoad, setFirstLoad] = useState(true);
+  const [hiddenStyle, setHiddenStyle] = useState('section__hidden');
+
+  useEffect(() => {
+    if (entry.isIntersecting && firstLoad) {
+      setHiddenStyle('');
+      setFirstLoad(false);
+      console.log(
+        title,
+        entry.isIntersecting,
+        entry.intersectionRatio,
+        hiddenStyle
+      );
+    }
+  }, [entry.isIntersecting]);
+
   return (
-    <section className={styles.wrapper} style={styleProps.wrapper}>
+    <section
+      ref={ref}
+      className={`${styles.wrapper} ${styles[hiddenStyle]}`}
+      style={styleProps.wrapper}
+    >
       <Container
         className={`${styles.inner} ${styles[customInnerClass]}`}
         styles={{ flexDirection: rowOrder }}

hooks/useIntersect.js

@@ -0,0 +1,32 @@
+import { useState, useEffect, useRef } from 'react';
+
+export const useIntersect = ({ root = null, rootMargin, threshold = 0 }) => {
+  const [entry, setEntry] = useState({});
+  const [node, setNode] = useState(null);
+
+  const observer = useRef(null);
+
+  useEffect(() => {
+    //if (observer.current) observer.current.disconnect();
+
+    observer = new window.IntersectionObserver(
+      ([entry]) => {
+        setEntry(entry);
+      },
+      { root, rootMargin, threshold }
+    );
+
+    //const { current: currentObserver } = observer;
+    if (node) {
+      observer.observe(node);
+    }
+    return () => {
+      observer.disconnect();
+      if (node) {
+        observer.unobserve(node);
+      }
+    };
+  }, [node, root, rootMargin, threshold]);
+
+  return [setNode, entry];
+};

pages/index.js

@@ -1,3 +1,4 @@
+import { useRef, useEffect, useState } from 'react';
 import Bracket from '../components/Bracket';
 import Stick from '../components/Stick';
 import TwoColumn from '../components/TwoColumn';
@@ -6,6 +7,8 @@ import styles from '../styles/Home.module.scss';
 import { white, primary } from '../styles/TwoColumn.module.scss';
 
 export default function Home() {
+  const aboutIsVisible = true; //temp
+
   return (
     <>
       <TwoColumn
@@ -15,7 +18,6 @@ export default function Home() {
         link="/about"
         customBtnClass="inverted-grey"
       />
-
       <Bracket className={styles.bracket} />
 
       <TwoColumn

styles/Home.module.scss

@@ -17,6 +17,7 @@
 .bracket {
   left: 0;
   position: absolute;
+  z-index: 2;
   transform: translate(10rem, -5rem);
 
   @include desktop-breakpoint-plus {
@@ -32,6 +33,7 @@
 .stick {
   right: 0;
   position: absolute;
+  z-index: 2;
   transform: translate(-10rem, -5rem);
 
   @include desktop-breakpoint-plus {

styles/TwoColumn.module.scss

@@ -1,8 +1,14 @@
 @use './variables' as *;
 @use './mixins' as *;
 
+.section__hidden {
+  opacity: 0;
+  transform: translateY(8rem);
+}
+
 .wrapper {
   background-color: $light-bg-color;
+  transition: transform 1s, opacity 1s;
 
   .inner {
     padding: 5rem 0;