Intersection Observer

sayshark75 · Nov 17, 2023 · 9eb41fc · 9eb41fc
1 parent 7efaffe
commit 9eb41fc
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,8 @@
 
 - Day 20: Contact Form Service Added, and added Validations.
 
+- Day 21: Added Intersection Observer Hook, now we re-animate elements.
+
 ## My Learnings
 
 - Basic types
@@ -50,6 +52,8 @@
 - Interfaces, and its inheritance with classes / OOPS
 - Generic types
 - Type Combinations using "&", "|"
+- Classes, Abstraction, Inheritance, Encapsulation using TypeScript features.
 - Type Inference
 - Usage of "unknown" type than "any" type.
 - Handling React Components and Contexts with TypeScript.
+- Handling Ref's with TypeScript
diff --git a/src/components/AboutPage/AboutCard.tsx b/src/components/AboutPage/AboutCard.tsx
@@ -4,18 +4,23 @@ import DescAboutPage from "./DescAboutPage";
 import ContributionList from "./ContributionList";
 import { fadeBottom } from "../../animations/FadeAnimations";
 import ResumeButton from "./ResumeButton";
+import { RefObject, useRef } from "react";
+import useIntersectionObserver from "../../hooks/useIntersectionObs";
 
 const AboutCard = () => {
+  const animRef: RefObject<HTMLDivElement> = useRef(null);
+  const isIntersecting = useIntersectionObserver(animRef);
   return (
     <Flex
       rounded={"md"}
       shadow={"xl"}
+      ref={animRef}
       bgColor={"#3a3a3a"}
       pos={"relative"}
       justifyContent={"center"}
       alignItems={"flex-start"}
       opacity={0}
-      animation={`${fadeBottom} 1s ease-in forwards`}
+      animation={isIntersecting ? `${fadeBottom} 1s ease-in forwards` : "none"}
       minW={"240px"}
       direction={["column", "column", "row"]}
       w={"100%"}

diff --git a/src/components/AboutPage/DescAboutPage.tsx b/src/components/AboutPage/DescAboutPage.tsx
@@ -1,21 +1,27 @@
 import { Text } from "@chakra-ui/react";
 import { fadeTop } from "../../animations/FadeAnimations";
+import { RefObject, useRef } from "react";
+import useIntersectionObserver from "../../hooks/useIntersectionObs";
 
 const DescAboutPage = () => {
+  const animRef: RefObject<HTMLParagraphElement> = useRef(null);
+  const isIntersecting = useIntersectionObserver(animRef);
   return (
     <Text
       transition={"400ms"}
       opacity={0}
-      animation={`${fadeTop} 1s ease-in forwards 1s`}
+      ref={animRef}
+      animation={isIntersecting ? `${fadeTop} 1s ease-in forwards 1s` : "none"}
       color={"white"}
       letterSpacing={"2px"}
       fontFamily={"Poppins"}
       textAlign={["justify"]}
       fontSize={["12px", "14px"]}
       mt={["60px", "60px", "0px"]}
     >
-      Full-stack developer with a focus on building and deploying user-friendly, high-performance web applications. Expertise in both front-end and back-end development, with a
-      strong understanding of design patterns and best practices. Ability to work independently and as part of a team to deliver high-quality products.
+      Full-stack developer with a focus on building and deploying user-friendly, high-performance web applications. Expertise in both
+      front-end and back-end development, with a strong understanding of design patterns and best practices. Ability to work independently
+      and as part of a team to deliver high-quality products.
     </Text>
   );
 };

diff --git a/src/components/Headings/BigHeading.tsx b/src/components/Headings/BigHeading.tsx
@@ -1,17 +1,21 @@
 import { Flex, Text } from "@chakra-ui/react";
 import { HeadingProps } from "../../TYPES";
 import { fadeLeft, fadeRight } from "../../animations/FadeAnimations";
+import useIntersectionObserver from "../../hooks/useIntersectionObs";
+import { RefObject, useRef } from "react";
 
 const BigHeading = ({ title1, title2 }: HeadingProps) => {
+  const animRef: RefObject<HTMLDivElement> = useRef(null);
+  const isIntersecting = useIntersectionObserver(animRef);
   return (
-    <Flex direction={{ base: "column", sm: "row" }}>
+    <Flex ref={animRef} direction={{ base: "column", sm: "row" }}>
       <Text
         fontFamily={"Poppins"}
         cursor={"pointer"}
         fontWeight={600}
         transition={"500ms"}
         opacity={0}
-        animation={`${fadeLeft} 1s ease-out forwards`}
+        animation={isIntersecting ? `${fadeLeft} 1s ease-out forwards` : "none"}
         textShadow={["none", "3px 3px 0px #006aff", "4px 4px 0px #006aff"]}
         fontSize={["34px", "40px", "64px", "86px", "108px"]}
         color={"#fffffd"}
@@ -25,7 +29,7 @@ const BigHeading = ({ title1, title2 }: HeadingProps) => {
         fontWeight={600}
         opacity={0}
         transition={"500ms"}
-        animation={`${fadeRight} 1s ease-out 500ms forwards`}
+        animation={isIntersecting ? `${fadeRight} 1s ease-out 500ms forwards` : "none"}
         textShadow={["none", "3px 3px 0px #fff", "4px 4px 0px #fff"]}
         fontSize={["34px", "40px", "64px", "86px", "108px"]}
         color={"#006aFF"}

diff --git a/src/components/Headings/MdHeading.tsx b/src/components/Headings/MdHeading.tsx
@@ -2,8 +2,12 @@ import { Flex, Highlight, Text } from "@chakra-ui/react";
 import { HeadingProps } from "../../TYPES";
 import { fadeTop } from "../../animations/FadeAnimations";
 import { ScalePing } from "../../animations/ScaleAnimations";
+import { RefObject, useRef } from "react";
+import useIntersectionObserver from "../../hooks/useIntersectionObs";
 
 const MdHeading = ({ title1, title2 }: HeadingProps) => {
+  const animRef: RefObject<HTMLParagraphElement> = useRef(null);
+  const isIntersecting = useIntersectionObserver(animRef);
   return (
     <Flex>
       <Text
@@ -13,10 +17,11 @@ const MdHeading = ({ title1, title2 }: HeadingProps) => {
         transition={"500ms"}
         color={"#006aff"}
         my={"4"}
+        ref={animRef}
         cursor={"pointer"}
         rounded={"full"}
-        animation={`${fadeTop} 1s ease-in forwards `}
-        _active={{ transform: "translateY(-20px)", animation: `${ScalePing} 1s ease-in-out` }}
+        animation={isIntersecting ? `${fadeTop} 1s ease-in forwards` : "none"}
+        _active={{ transform: "translateY(-20px)", animation: isIntersecting ? `${ScalePing} 1s ease-in-out` : "none" }}
       >
         <Highlight query={title2} styles={{ color: "#fff" }}>
           {`${title1} ${title2}`}

diff --git a/src/components/HomePage/DescHome.tsx b/src/components/HomePage/DescHome.tsx
@@ -1,10 +1,15 @@
 import { Text } from "@chakra-ui/react";
 import { fadeTop } from "../../animations/FadeAnimations";
+import { RefObject, useRef } from "react";
+import useIntersectionObserver from "../../hooks/useIntersectionObs";
 
 const DescHome = () => {
+  const animRef: RefObject<HTMLDivElement> = useRef(null);
+  const isIntersecting = useIntersectionObserver(animRef);
   return (
     <Text
       as={"b"}
+      ref={animRef}
       transition={"500ms"}
       color={"#FFFFFF"}
       fontWeight={400}
@@ -13,10 +18,11 @@ const DescHome = () => {
       fontSize={["12px", "14px", "16px", "18px"]}
       m={["4", "8"]}
       letterSpacing={"2px"}
-      animation={`${fadeTop} 1s ease-out forwards`}
+      animation={isIntersecting ? `${fadeTop} 1s ease-out forwards` : "none"}
     >
-      A Full Stack Developer who enjoys solving problems and building quality projects. With a diverse set of skills and technologies, Can develop robust and efficient products.
-      Keep up with the latest advancements in the field, and work well with teams to deliver the best possible results.
+      A Full Stack Developer who enjoys solving problems and building quality projects. With a diverse set of skills and technologies, Can
+      develop robust and efficient products. Keep up with the latest advancements in the field, and work well with teams to deliver the best
+      possible results.
     </Text>
   );
 };

diff --git a/src/components/HomePage/IconButtonComp.tsx b/src/components/HomePage/IconButtonComp.tsx
@@ -2,61 +2,35 @@ import { IconButton, Tooltip } from "@chakra-ui/react";
 import { polishAnim } from "../../animations/NavbarAnimations";
 import { SocialBtnType } from "../../TYPES";
 import { fadeTop } from "../../animations/FadeAnimations";
+import { RefObject, useRef } from "react";
+import useIntersectionObserver from "../../hooks/useIntersectionObs";
 
-const IconButtonComp = ({
-  link,
-  tooltip,
-  label,
-  icon,
-  onClick,
-  delay,
-}: SocialBtnType) => {
+const IconButtonComp = ({ link, tooltip, label, icon, onClick, delay }: SocialBtnType) => {
   return link ? (
     <a href={link} target={"_blank"} rel="noreferrer">
-      <IconButtonHome
-        icon={icon}
-        label={label}
-        onClick={onClick}
-        tooltip={tooltip}
-        delay={delay}
-      />
+      <IconButtonHome icon={icon} label={label} onClick={onClick} tooltip={tooltip} delay={delay} />
     </a>
   ) : (
-    <IconButtonHome
-      icon={icon}
-      label={label}
-      onClick={onClick}
-      tooltip={tooltip}
-      delay={delay}
-    />
+    <IconButtonHome icon={icon} label={label} onClick={onClick} tooltip={tooltip} delay={delay} />
   );
 };
 
 export default IconButtonComp;
 
-const IconButtonHome = ({
-  label,
-  icon,
-  onClick,
-  tooltip,
-  delay,
-}: SocialBtnType) => {
+const IconButtonHome = ({ label, icon, onClick, tooltip, delay }: SocialBtnType) => {
+  const animRef: RefObject<HTMLButtonElement> = useRef(null);
+  const isIntersecting = useIntersectionObserver(animRef);
   return (
-    <Tooltip
-      bg={"#FFF"}
-      color={"#000"}
-      mt={"4"}
-      transition={"500ms"}
-      label={tooltip}
-    >
+    <Tooltip bg={"#FFF"} color={"#000"} mt={"4"} transition={"500ms"} label={tooltip}>
       <IconButton
+        ref={animRef}
         rounded={"full"}
         size={"sm"}
         opacity={0}
         mx={["1px", "2", "3", "5", "6"]}
         color={"#fff"}
         bgColor={"#4a4a4a"}
-        animation={`${fadeTop} 1s ease-in-out ${delay} forwards`}
+        animation={isIntersecting ? `${fadeTop} 1s ease-in-out ${delay} forwards` : "none"}
         shadow={"dark-lg"}
         transition={"700ms"}
         _hover={{ bgColor: "black", color: "white" }}

diff --git a/src/hooks/useIntersectionObs.ts b/src/hooks/useIntersectionObs.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+
+const useIntersectionObserver = (ref: React.RefObject<Element>, options = {}) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      observer.current = new IntersectionObserver(([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+      }, options);
+
+      observer.current.observe(ref.current);
+
+      return () => {
+        if (observer.current) {
+          observer.current.disconnect();
+        }
+      };
+    }
+  }, [ref, options]);
+
+  return isIntersecting;
+};
+
+export default useIntersectionObserver;